結論:
- 更新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。