为什么 vuejs v-for 需要 :key 属性？

Question

我的 vscode 抱怨我在 vuejs v-for 中需要这个属性，如

坏的

<p v-for='person in people'> {{person.name}} </p>

好的

<p v-for='(person, index) in people' :key='index'> {{person.name}} </p>

那么，为什么我们需要 :key 属性？

Answer 1

假设我们有一个数组中的项目列表。

v-for

如果我们使用v-for它将根据它们的索引显示所有这些项目。VueJs 不会跟踪所有这些元素。每当在项目中进行任何更改时，VueJs 都会根据数组中项目的索引替换 dom 中的位置。（只是替换而不是移动元素）它只是修补或替换位置（在 dom 中）。它不存储数组项的任何值。它不跟踪项的值。它只存储索引位置。

这样做的问题是有时 vuejs 无法根据我们的需要更新项目数组中的任何更改。（记住在某些情况下）。如果我们希望我们的 vuejs 跟踪数组中的这些项目怎么办。这就是:key出现在图片中的地方。

：钥匙

现在，当我们在 v-for 中提到关键属性（如 item.id 等）时，vuejs 将直接引用这些项目。现在记住 vuejs 将存储项目而不是存储位置。Vuejs 将跟踪数组中的所有这些项目。每当现在对项目进行任何更改时，它都会更改 dom 中的这些项目。（通过移动 dom 中的元素）：key只是确保 vuejs 跟踪所有这些项目。（每个关键属性都像一个 id。无论何时更改 vuejs 将始终采用更新后的值。）

作为最终用户，我们看不到输出的太大差异（如果我们不提及:key），但在后台会发生上述事情。

通过这个你肯定会发现不同。 使用键控制可重用元素

Answer 2

正如thanksd所指出的：使用vue 2.2.0+时，vue组件是必需的：

\n

\n

在 2.2.0+ 中，当将 v-for 与组件一起使用时，现在需要密钥。

\n

\n

原答案：

\n

正如 Vue.js官方指南中所说：

\n

\n

要给 Vue 一个提示，以便它可以跟踪每个节点\xe2\x80\x99s 身份，从而重用和重新排序现有元素，需要提供唯一的 [...]\n 建议提供带有v 的密钥-for 只要有可能，除非迭代的 DOM 内容很简单，或者您故意依赖默认行为来提高性能。

\n

\n

您不需要属性即可key使用v-for，但这是一种很好的做法，这就是 VScode 的 intelliSense 告诉您添加一个属性的原因。

\n