我用 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
 |
1
marsorsun 15 天前
1.会更优 但也只是空间换时间 你要是后端直接拿的直接覆盖个人觉得只是数据展示不会差太多？你一页不至于放 1w 条数据吧
2.这个你有后端不至于前端做吧，感觉不合适你得分页吧？ |
 |
2
weixiaoD OP @marsorsun 后端不是我写的，它提供的方法只有全部获取还有获取近期数据变动的对象数组以及根据指定 id 来获取这个对象信息，所以无法在后端完成分页，只能全部把数据拉下来前端再做处理。
https://github.com/transmission/transmission/blob/main/docs/rpc-spec.md#33-torrent-accessor-torrent-get |
 |
3
alvinbone88 15 天前
数据量较大的时候推荐用虚拟滚动，无论哪个框架和浏览器都很难保证大列表的情况下不会卡的
|
|
4
weixiaoD OP @alvinbone88 是的,目前就是使用虚拟滚动, 现在就是想能不能在数据源更新的方向上做点优化...
|
 |
5
rabbbit 15 天前
vue2 可以用 Object.freeze 阻止跟踪对象内属性值的响应，优化性能。
vue 3 应该是 shallowRef ？(不确定，我没用过) 搜索的话我做过前端搜索 1 万条的，其实速度还好。 |
|
6
rabbbit 15 天前
唔，补充下。上面的搜索也是先更新变了的然后搜索，不是全量替换。
|
|
7
marsorsun 12 天前
@weixiaoD 之前有看到过可排序的框架 不知道对楼主有没有参考性 https://tanstack.com/table/latest/docs/framework/vue/examples/sorting
|
Select Language