Question

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

BAD

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

GOOD

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

那么，为什么我们需要：关键属性？

Answer 1

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

v-for

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

问题是有时vuejs数组中的所有更改都无法根据我们的需要进行更新（在某些情况下请记住）。如果我们希望vuejs跟踪数组中的那些项目，该怎么办？这就是图片中的：key 的位置。

：键

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

作为最终用户，我们不会在输出上看到太多差异（如果我们不提及：key ），但是在上面的背景中会发生这种情况。

通过此操作，您一定会发现不同之处。 Controlling Reusable Elements with key

Answer 2

感谢pointed out：使用vue 2.2.0 +时为required for vue components：

在2.2.0+中，当对组件使用v-for时，现在需要一个键。

原始答案：

正如在Vue.js official guide中所说的那样：

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

您不需要需要 key属性才能使用v-for，但这是一个很好的做法，这就是为什么VScode的intelliSense会告诉您添加一个。< / p>

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

2 个答案: