vue中使用v-for時為什麼不能用index作為key
結論：
- 更新DOM的時候會出現效能問題
- 會發生一些狀態bug
- React 中的 key 也是如此
- 如果已經瞭解 為什麼要用key，可以通過目錄直接跳到下一節。
為什麼要用key？
Vue 和 React 都實現了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作資料便可以重新渲染頁面。而隱藏在背後的原理便是其高效的Diff演算法。
Vue 和 React 的虛擬DOM的Diff演算法大致相同，其核心是基於兩個簡單的假設：
- 兩個相同的元件產生類似的DOM結構，不同的元件產生不同的DOM結構。
- 同一層級的一組節點，他們可以通過唯一的id進行區分。
基於以上這兩點假設，使得虛擬DOM的Diff演算法的複雜度從O(n^3)降到了O(n)。
用一張圖簡單說明一下：
當頁面的資料發生變化時，Diff演算法只會比較同一層級的節點：
如果節點型別不同，直接幹掉前面的節點，再建立並插入新的節點。
如果節點型別相同，則會重新設定該節點的屬性，從而實現節點的更新。
舉個栗子：
我們希望可以在B和C之間加一個F，Diff演算法預設執行起來是這樣的：
即把C更新成F，D更新成C，E更新成D，最後再插入E，這樣效率不高，且效能不夠好。
但是，如果使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
總而言之，key的作用主要是為了高效的更新虛擬DOM 。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。
這裡，也建議儘可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單。
為什麼不能用index作為key？
舉個栗子：
<template>
<div v-for="(item,index) in list" :key="index" >{{item.name}}</div>
</template>
const list = [
{
id: 1,name: "Person1"
},{
id: 2,name: "Person2"
},{
id: 3,name: "Person3"
},{
id:4,name:"Person4"
}
];
此時，刪除 “Person4” 是正常的，但是如果我刪除 “Person2” 就會出現問題。
刪除前
| key | id | index | name |
|---|---|---|---|
| 0 | 1 | 0 | Person1 |
| 1 | 2 | 1 | Person2 |
| 2 | 3 | 2 | Person3 |
| 3 | 4 | 3 | Person4 |
刪除後
| key | id | index | name |
|---|---|---|---|
| 0 | 1 | 0 | Person1 |
| 1 | 3 | 1 | Person3 |
| 2 | 4 | 2 | Person4 |
這個時候，除了 Person1 之外，剩下的 Person3、Person4，因為被發現與相應 key 的繫結關係有變化，所以被重新渲染，這會影響效能。
如果此時 list 的 item 是 select 的選項，其中 Person3 是選中的，這個時候 Person2 被刪除了，用 index 作為 key 就會變成是 Person4 選中的了，這就產生了bug。
如果使用唯一id作為key，刪除 Person2 後，剩下的元素因為與 key 的關係沒有發生變化，都不會被重新渲染，從而達到提升效能的目的。此時，list 的 item 作為 select 的選項，也不會出現上面所描述的bug。
到此這篇關於vue中使用v-for時為什麼不能用index作為key的文章就介紹到這了,更多相關vue v-for不能用index作為key內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！