Question

我在这里问过这个问题：https://forum.vuejs.org/t/comparing-computed-vs-a-copy/34542，并没有得到任何牵引力。

TL; DR使用Vue JS计算似乎重新评估计算机不依赖的属性。

下面是一个jsfiddle，显示了我在计算机上遇到的奇怪（可能是可解释的）。

根据罗伊的建议： https://jsfiddle.net/1v58dj8x/4/

Vue js属性：

data:
    {
        items: [],
        copy: [],
        starti: 0,
        endi: 100,
        total: 5000
    },

该示例显示了两个具有相同数据的图表。一个是计算（项目），另一个是较大数据集（也是项目）的副本。我假设在访问期间并且没有依赖关系改变，计算应该与同一数据的副本一样快。

实际上，如果一个人只是一遍又一遍地调用points（）。但是，如果我更改starti或endi，那么似乎vue正在重新评估底层依赖项（items）。我不明白为什么会这样。我希望它不会重新评估为starti和endi不是（在我看来）依赖。

我遇到的第二个问题是第一次计算的运行需要很长时间。然而，由于加载动画很容易隐藏初始加载，因此不太关注。

如果更改了数据点的数量（即总数不一致），您可以看到访问和加载的时间差异不是线性的。在几个项目中，我只是坚持使用数据副本来支持速度，但是我想在这里清晰，因为我很可能没有正确使用这个库（Vue js）。

Answer 1

我通过重写filter获得了巨大的初始加速：

        filter: function()
        {
            let ret = this.items
              .filter((i) => i.type === 'criteria')
              .map((i) => ({name: i.name, value: i.value}));

            return ret;
        },

看起来对可观察（计算或非计算）数组的索引操作相当昂贵。

这也表现良好：

    filter: function() {
      let ret = [];

      this.items.forEach((item) => {
        if (item.type == 'criteria')
          ret.push({
            'name': item.name,
            'value': item.value
          });
      });

      return ret;
    },

我还修改了points以停止索引filtereditems（请参阅此处的第一行和最后一行）：

      const items = this.filtereditems;
      for (let i = this.starti; i < end; ++i) {
        let x = i * 5 + 100;
        let y = items[i].value + 200;

和points现在比points4copy更快。（以同样的方式编辑points4copy也可以加快速度。）

课程：避免索引可观察数组。

比较计算与副本（Vue js）

1 个答案: