将数组元素索引作为键放在Vue v-for元素上是否有意义？

Question

我正在使用Vue v-for来迭代数组，例如：

<div v-for="item in items">
    {{ item }}
</div>

Vue告诉我有一把钥匙并建议我查看文档：{​​{3}}。

将索引放在:key？

中是否有意义？

示例：

<div v-for="(item, index) in items" :key="index">
    {{ item }}
</div>

Answer 1

如果你的Item是一个id道具的对象，那么最好使用它。

在您确定数据无法复制的小规模应用程序中，我会使用与索引混合的对象name或id道具，例如

<div v-for="(item, index) in items" :key="`${item.id}-${index}`">

或

<div v-for="(item, index) in items" :key="`${item.name}-${index}`">

Answer 2

Using index as a key is an anti-pattern

  

如果您将项目推送到列表或删除某些内容会发生什么   中间？如果密钥与之前相同[Vue]则假定DOM   element表示与以前相同的组件。但那不再是   真。