比較計算與副本（Vue js）

Question

我在這里問過這個問題： https : //forum.vuejs.org/t/comparing-computed-vs-a-copy/34542 ，但沒有任何吸引力。

TL; DR使用Vue JS計算的似乎重新評估了計算不依賴的屬性。

下面是一個jsfiddle，顯示了我在計算中遇到的一個奇怪現象（也許可以解釋）。

原文： https ： //jsfiddle.net/1v58dj8x/3/

有了羅伊的建議： https : //jsfiddle.net/1v58dj8x/4/

Vue JS屬性：

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

該示例顯示了兩個具有相同數據的圖。 一個是計算的（項目），另一個是較大數據集（也是項目）的副本。 我假設在訪問期間且不更改其依賴關系，所計算的應該與復制相同數據一樣快。

實際上，就是一遍又一遍地調用points（）。 但是，如果我更改starti或endi，則似乎vue正在重新評估基礎的依賴項（項目）。 我不明白為什么會這樣。 我希望它不會重新評估，因為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也可以加快速度。）

課程：避免索引可觀察數組。