请教 vue3 数组更新方式问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
weixiaoD
V2EX    Vue.js

请教 vue3 数组更新方式问题

  •  
  •   weixiaoD 2024-05-17 19:45:10 +08:00 2252 次点击
    这是一个创建于 577 天前的主题,其中的信息可能已经有所发展是发生改变。

    我用 vue3 给一个下载器写了 WebUI ,数据是一个定时(3 秒刷新一次)从服务端获取的对象数组,格式大致是

    [{id:xx, name:xx, path:xx,downspeed:xx,upspeed:xx,tracker:xx, addeddate:xx, percentDone:xx, ...}]

    这里面的属性有些是固定不变的,比如 id,name,addeddate 等,有些是需要实时刷新在 UI 里呈现出来的,像下载 上传速度,下载进度等。另外已经下载完成的,基本上是所有属性都不变得了,这部分占整体 95%左右(没有公网 ip 所以别人基本连不上,没上传), 对象数量在 1-2W 左右,拿到数据之后直接给 naiveui 的 datatable 组件用 v-for 渲染出来,然后我在从页面上做一些过滤,搜索等操作,现在数据的更新我是简单的直接把服务端更新下来的数据重新赋值给表格的数据源,现在我有一个想法,但是不知道从底层逻辑代码的角度不知道这有没有效果。

    我不整个数组都全部替换,只把那些有数值更新的对象从原数组里删除,然后把服务端获取回来的有更新的对象重新 push 进去,服务端也提供了一个仅获取近期有改变的对象数组,所以我只要把这个获取回来的新数组根据对象里面的 id 属性(具有唯一性)把原数组里的对象都删除再合并两个数组。 这个方法和整个数组替换,从 vue3 的角度看的话,性能会更优吗?

    另外还有就是 UI 上会做一些过滤,搜索,排序等操作,假设数据是 1W 的话,如果是整个数组替换的方式那每次刷新不就是执行过滤还有排序函数几万次?

    7 条回复    2024-05-20 23:14:46 +08:00
    marsorsun
        1
    marsorsun  
       2024-05-17 20:05:28 +08:00
    1.会更优 但也只是空间换时间 你要是后端直接拿的直接覆盖个人觉得只是数据展示不会差太多?你一页不至于放 1w 条数据吧
    2.这个你有后端不至于前端做吧,感觉不合适你得分页吧?
    weixiaoD
        2
    weixiaoD  
    OP
       2024-05-17 20:19:59 +08:00 via Android
    @marsorsun 后端不是我写的,它提供的方法只有全部获取还有获取近期数据变动的对象数组以及根据指定 id 来获取这个对象信息,所以无法在后端完成分页,只能全部把数据拉下来前端再做处理。
    https://github.com/transmission/transmission/blob/main/docs/rpc-spec.md#33-torrent-accessor-torrent-get
    alvinbone88
        3
    alvinbone88  
       2024-05-17 21:09:06 +08:00
    数据量较大的时候推荐用虚拟滚动,无论哪个框架和浏览器都很难保证大列表的情况下不会卡的
    weixiaoD
        4
    weixiaoD  
    OP
       2024-05-17 21:26:12 +08:00
    @alvinbone88 是的,目前就是使用虚拟滚动, 现在就是想能不能在数据源更新的方向上做点优化...
    rabbbit
        5
    rabbbit  
       2024-05-17 21:59:09 +08:00
    vue2 可以用 Object.freeze 阻止跟踪对象内属性值的响应,优化性能。
    vue 3 应该是 shallowRef ?(不确定,我没用过)
    搜索的话我做过前端搜索 1 万条的,其实速度还好。
    rabbbit
        6
    rabbbit  
       2024-05-17 22:08:08 +08:00
    唔,补充下。上面的搜索也是先更新变了的然后搜索,不是全量替换。
    marsorsun
        7
    marsorsun  
       2024-05-20 23:14:46 +08:00
    @weixiaoD 之前有看到过可排序的框架 不知道对楼主有没有参考性 https://tanstack.com/table/latest/docs/framework/vue/examples/sorting
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     920 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 19:37 PVG 03:37 LAX 11:37 JFK 14:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86