在 Vue.js 中使用对象作为键会产生什么后果？

Question

我是 vue.js 的新手

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

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

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

我可以安全地使用它吗？

谢谢！

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"

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