Vue.js 可以减少v-for中相同呼叫的数量吗？

下面的代码片段显示了一个极端的示例，其中多次调用了完全相同的方法。有没有一种方法可以压缩它，这样它就不会显式地被称为N次

<someTag v-for="data in getData" :key="generateKey(data)-key" class="generateKey(data)" :id="generateKey(data)">
 <p>{{ data.someProperty }}, {{ data.someOtherProperty }}</p>
</someTag>

{{data.someOtherProperty}，{{data.someOtherProperty}

这个怎么样

...
computed: {
  mappedData () {
    return this.getData.map(d => {
      d.key = generateKey(d)
      return d
    })
  }
}

及

{{data.someOtherProperty}，{{data.someOtherProperty}

---

O（n）中的generateKey调用减少66%

是否有您试图解决的特定问题？避免在v-for中重复调用可能会导致计算量大。这是一个极端的例子，但简单地演示了problemone选项可能是拥有一个对象，其中键是数据，生成的键是值。调用函数一次，它设置值，其他函数使用computed/getter返回相应的值。或者，

getData

可以为数据生成键，并将该键作为属性添加到数据中。如果看不到

getData

和数据结构，就很难准确地告诉您如何操作。您可以拥有

computed

属性，该属性输出转换后的

getData

，并为每个对象绑定

键类和id

字段。

<someTag v-for="data in mappedData" :key="`${data.key}-key`" :class="data.key" :id="data.key">
 <p>{{ data.someProperty }}, {{ data.someOtherProperty }}</p>
</someTag>