通过AJAX加载大量数据（-15 000条记录），然后用于填充两个数组，一个按ID排序，另一个按名称排序 . 两个数组都包含不同排序的相同对象 .
数据显示在树视图中，但用户可以更改层次结构 . 树在第一级虚拟化，因此只有显示50％的记录被“物化”为vue组件 .
将两个数组作为数据提供给vue实例非常慢 . 我怀疑vue.js是两次向对象添加观察者，或者多次发送更改通知，我真的不知道 .
因此，只有一个数组被添加到vue中，另一个数组被带外使用 .
Vue减慢了向阵列添加元素的速度 . 如果在绑定到vue实例之前填充数组，则在显示树视图之前需要-20秒 . 如果我在填充数组之前将其绑定，则在树视图变为可用之前需要大约-50秒（元素几乎立即显示） . 这可能是因为添加了所有这些元素的通知 .
-
有没有办法添加具有重复数据的第二个数组，以便vue.js监视它的变化，但它不会减慢vue的速度吗？
-
有没有办法暂时切换观看/通知，这样可以将元素添加到数组而不会受到惩罚，但是当重新打开通知时会被“监视”？
我不确定减速背后的推理是否正确，所以也许我的问题是错误的 .
另外一件事我需要观察数组并且只需要元素的一个属性 .
var recordsById = [];
var recordsByName = [];
// addRecord gets called for every record AJAX returns, so +-15 000
// calling addRecord 15 000 times before 'binding' takes 20 sec (20 sec with no display)
// calling addRecord after 'binding' takes > 50 sec (instant display but CPU usage makes treeview unausable)
function addRecord(record) {
var pos = binarySearch(recordsById, record);
recordsById.splice(0, pos, record);
pos = binarySearch(recordsByName, record);
recordsByName.splice(0, pos, record);
}
var treeView = new Vue({
el: '#treeView',
data: {
// If I uncomment following line, vue becomes very slow, not just for initial loading, but as a whole
//recordsById: recordsById,
recordsByName: recordsByName
},
computed: {
virtualizedList: function() {.....}
}
})
1 回答
有几种技术可以改善您的表现 .
使用键
要渲染大型列表，首先要做的是use a key . 一个很好的候选人就是你所说的
id.使用分页
"displaying a lot of data is slow"的一个明显的解决方案是"display less data" . 让我们面对现实，15 000很多 . 即使Vue本身可以快速插入和更新这么多行，想想用户的浏览器：它能跟上吗？即使它是最简单的文本节点列表，它仍然会有很多节点 .
使用虚拟滚动技术
如果你不喜欢分页的外观，更高级的方法是虚拟滚动 . 当用户浏览此大型列表时，动态添加下面的元素，并删除用户已经看到的元素 . 您可以将DOM中列表中的元素总数保持为最小值 .