vue.js - 为什么是:key attribute needed in vuejs v-for?

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 vuejs 中提到关键属性(如 item.id 等)时，将直接引用这些项目。现在请记住，vuejs 不是存储位置，而是存储项目。 Vuejs 将跟踪数组中的所有这些项目。每当对项目进行任何更改时，它都会更改 dom 中的这些项目。(通过移动 dom 中的元素):key 只是确保 vuejs 跟踪所有那些项目。(每个关键属性都像一个 id。每当发生变化时，vuejs 将始终采用更新后的值。)

作为最终用户，我们看不出输出有多大差异(如果我们不提及 :key)，但在上面的背景中会发生一些事情。

通过这个你一定会发现不同之处。 Controlling Reusable Elements with key