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>