Vue.js緩存方法結果？

Question

我現在有一個循環兩次調用相同的功能，在循環，像這樣：

<div class="checkbox" v-for="(value, key) in range"> 
    <input type="checkbox" :disabled="count(Number(key)) === 0"> 

    <span class="items">{{ count(Number(key)) }}</span> 
</div> 

因爲count方法被調用了兩次就更難調試count功能，因爲在像一個console.log所有值將出現兩次。

第一個計數方法只是檢查它是否爲零，而另一個表示計數。有沒有簡單的方法來重新使用count方法的結果，所以我實際上不需要再調用它兩次。當我已經有了結果時，不需要再次調用它。

像計算屬性的東西不會工作，因爲我需要通過當前的迭代密鑰。

Answer 1

可悲的是設計一個方法將總是重新渲染，沒有緩存菱據我所知：

相比之下，方法調用將始終運行功能 每當重新繪製發生。

爲什麼我們需要緩存？想象一下，我們有 一個昂貴的計算屬性A，它需要循環通過一個巨大的數組並進行大量的計算。然後我們可能會有其他的 計算屬性，依次取決於A.如果沒有緩存，我們 將執行A的getter多於必要的次數！在不需要緩存的情況下，請使用方法 。

來源：https://vuejs.org/v2/guide/computed.html

通過我認爲它仍然可以使用計算的財產大部分時間的方式：

computed: { 
    rangeWithCount() { 
     // assuming that range is an array, otherwise use Object.entries() 
     return this.range.map((value, key) => { 
      // assuming value is already an object, otherwise create a new one 
      return Object.assign({}, value, { 
       count: foo(key) 
      }); 
     }) 
    } 
} 

而就國際熱核實驗堆在計算的道具：

<div class="checkbox" v-for="value in rangeWithCount"> 
    <input type="checkbox" :disabled="value.count === 0"> 

    <span class="items">{{ value.count }}</span> 
</div>