使用键

Question

通过AJAX加载大量数据（+ -15 000条记录），然后用于填充两个数组，一个按ID排序，另一个按名称排序。两个数组都包含不同排序的相同对象。

数据显示在树状视图中，但用户可以更改层次结构。树在第一级虚拟化，因此仅显示+ 50％的记录已实现＆＃39;作为vue组件。

将两个数组作为数据提供给vue实例非常慢。我怀疑vue.js正在向对象添加两次观察者，或者多次发送更改通知，我真的不知道。

因此，只有一个数组被添加到vue中，另一个数组被带外使用。

Vue大大减慢了向阵列添加元素的速度。如果在绑定到vue实例之前填充数组，则在显示树视图之前需要+ -20s。如果在填充数组之前将其绑定，则在树视图变为可用之前需要大约+ -50s（元素几乎立即显示）。这可能是因为添加了所有这些元素的通知。

有没有办法添加第二个包含重复数据的数组，以便vue.js监视它的变化，但它不会减慢vue的速度？
有没有办法暂时切换观看/通知，这样就可以将元素添加到阵列中而不会受到惩罚，但是要观看＆＃39;什么时候重新开启通知？

我不确定减速背后的推理是否正确，所以也许我的问题被误导了。

另一件事我需要观察数组，而只需要元素的一个属性。

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() {.....}
  }
})

Answer 1

有一些技巧可以改善您的表现。

使用键

要渲染大型列表，首先要做的是use a key。一个很好的候选人就是你所说的id。

使用分页

“显示大量数据很慢”的明显解决方案是“显示更少的数据”。让我们面对现实，15 000 很多。即使Vue本身可以快速插入和更新这么多行，想想用户的浏览器：它能跟上吗？即使它是最简单的文本节点列表，它仍然会有很多节点。

使用虚拟滚动技术

如果您不喜欢分页的外观，更高级的方法是虚拟滚动。当用户浏览此大型列表时，动态添加下面的元素，并删除用户已经看到的元素。您可以将DOM中列表中的元素总数保持为最小值。

我如何加快观看＆＃39; vue.js

1 个答案:

使用键

使用分页

使用虚拟滚动技术