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函数变得更加困难，因为在诸如a之类的console.log所有值上都会出现两次。

第一种计数方法只是检查它是否为零，而另一种则表示计数。有没有一种简单的方法可以重用该count方法的结果，因此我实际上不必两次调用它。当我已经有结果时，无需再次调用它。

诸如计算属性之类的东西将无法正常工作，因为我需要传递当前的迭代键。

Answer 1

可悲的是，根据设计，一种方法将始终重新呈现，没有可用的缓存afaik：

相比之下，每当重新渲染发生时，方法调用将始终运行该函数。

为什么我们需要缓存？想象一下，我们有一个昂贵的计算属性A，它需要遍历一个巨大的Array并进行大量计算。然后，我们可能具有其他依赖于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>