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

遗憾的是，设计方法总是会重新渲染，没有可用的缓存 afaik：

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

为什么我们需要缓存？想象我们有 一个昂贵的计算属性 A，它需要循环一个 巨大的数组并进行大量计算。那么我们可能还有其他 计算属性又依赖于 A。没有缓存，我们 将执行 A 的吸气剂比必要的次数多得多！在案件 如果您不想缓存，请改用方法。

来源：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>