我用 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 的话,如果是整个数组替换的方式那每次刷新不就是执行过滤还有排序函数几万次?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.