為什么不總是使用索引作為 vue.js for 循環中的鍵？

Question

我已經將 vue.js 用於幾個項目，並且我一直在使用索引作為 for 循環中的鍵

<div v-for="(item, index) in items" :key="index"></div>

...並開始懷疑是否存在問題，因為示例通常使用項目的 ID。

<div v-for="(item, index) in items" :key="item.ID"></div>

Answer 1

因為數組是可變的。 如果項目被添加到數組或從數組中刪除，任何給定項目的索引都可以並且將會改變。

您希望您的key是一個唯一值，僅標識您的唯一組件。 您創建的主鍵總是比使用索引更好。

這是一個例子。

 console.clear() Vue.component("item", { props: ["value"], data() { return { internalValue: this.value } }, template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>` }) new Vue({ el: "#app", data: { items: [1, 2, 3, 4, 5] }, methods: { addValue() { this.items.splice(this.items.length / 2, 0, this.items.length + 1) } } })

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <div id="app"> {{items}} <ul> <item v-for="i in items" :value="i" :key="i"></item> </ul> <button @click="addValue">AddValue</button> <ul> <item v-for="(i, index) in items" :value="i" :key="index"></item> </ul> </div>

請注意，單擊addValue時，頂部的列表表示數組中真正在數組中的新數字； 在中間。 在按鈕下面的第二列表，值不陣列中表示的實際位置和所述內部和屬性值不同意。

Answer 2

來自 Vue 文檔（強調我的）： https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

要給 Vue 一個提示，以便它可以跟蹤每個節點的身份，從而重用和重新排序現有元素，您需要為每個項目提供一個唯一的鍵屬性

如果數組中任何項目的索引發生變化（例如，通過在數組末尾以外的任何地方添加/刪除新項目），那么 Vue 將失去對項目的跟蹤。

例如：

let data = [A, B, C, D]
<div v-for="(item, index) in data" :key="index">

Vue 像這樣跟蹤每個項目：

A: 0
B: 1
C: 2
D: 3

如果你從數組中刪除B ，Vue 將像這樣跟蹤每個項目：

A: 0
C: 1
D: 2

C和D的索引已經改變，所以 Vue失去了對它們的跟蹤，並且將從呈現的 output 而不是B中刪除D （因為從它的角度來看，刪除的是索引為 3 的項）。

這就是為什么鍵應該唯一標識一個項目，而索引不能做到這一點。

---

然而，這也意味着在某些情況下，使用索引作為鍵是可以接受的：

• 數組不會改變
• 或者數組只會在末尾添加/刪除項目並且不會重新排序
• 或者所有物品都相同

---

如果您不能將索引用作鍵，但不能唯一標識項目（例如，列表中的某些項目是相同的），解決方案可能是使用 lodash 的 uniqueId uniqueId() ：

<div v-for="item in data" :key="uniqueId()">

Answer 3

 console.clear() Vue.component("item", { props: ["value"], data() { return { internalValue: this.value } }, template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>` }) new Vue({ el: "#app", data: { items: [{name:'a'},{name:'b'},{name:'c'}] }, methods: { addValue() { this.items = [{name:'a'},{name:6},{name:'b'},{name:'c'}]; } } })

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <div id="app"> {{items}} <ul> <item v-for="i in items" :value="i.name" :key="i"></item> </ul> <button @click="addValue">AddValue</button> <ul> <item v-for="(i, index) in items" :value="i.name" :key="index"></item> </ul> </div>

為了更清楚