请教 vue3 数组更新方式问题

weixiaoD · 2024-5-17 19:45:10 · 77 次点击
我用 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 的话,如果是整个数组替换的方式那每次刷新不就是执行过滤还有排序函数几万次?
举报· 77 次点击
登录 注册 站外分享
3 条回复  
marsorsun 小成 2024-5-17 20:05:28
1.会更优  但也只是空间换时间  你要是后端直接拿的直接覆盖个人觉得只是数据展示不会差太多?你一页不至于放 1w 条数据吧
2.这个你有后端不至于前端做吧,感觉不合适你得分页吧?
alvinbone88 小成 2024-5-17 21:09:06
数据量较大的时候推荐用虚拟滚动,无论哪个框架和浏览器都很难保证大列表的情况下不会卡的
rabbbit 小成 2024-5-17 21:59:09
vue2 可以用 Object.freeze 阻止跟踪对象内属性值的响应,优化性能。
vue 3 应该是 shallowRef ?(不确定,我没用过)
搜索的话我做过前端搜索 1 万条的,其实速度还好。
返回顶部