vue.js - 在 Vue.js 中使用对象作为键的后果是什么？

Question

我是 vue.js 的新手

出于某种原因，我不得不使用如下代码：

<view v-for="item in list" :key="item">
  <!-- do somethings -->
</view>

这似乎工作正常，但我不确定它是否会导致一些问题，我非常非常抱歉我没有在其他地方找到类似的讨论

我可以安全使用它吗？

谢谢！

标签： vue.js

Answer 1

从关键文档：

期望：数字 | 字符串 | 布尔值（自 2.4.2 起） | 符号（自 2.5.12 起）

如果item是一个 JavaScript 对象，那么您不应该将它用作键。如果找不到其他要使用的键，请使用v-for索引：

<view v-for="(item, index) in list" :key="index">
  <!-- do some things -->
</view>

如果item对象具有独特的属性，例如id，最好使用：

:key="item.id"

至于后果，您会在控制台中收到两条警告，一条说明检测到重复键。这很糟糕，因为它可能导致渲染更新错误。