vue中 key 值的做用

原文地址

---

咱們知道，vue和react都實現了一套虛擬DOM，使咱們能夠不直接操做DOM元素，只操做數據即可以從新渲染頁面。而隱藏在背後的原理即是其高效的Diff算法。

vue和react的虛擬DOM的Diff算法大體相同，其核心是基於兩個簡單的假設：1. 兩個相同的組件產生相似的DOM結構，不一樣的組件產生不一樣的DOM結構。2. 同一層級的一組節點，他們能夠經過惟一的id進行區分。

基於以上這兩點假設，使得虛擬DOM的Diff算法的複雜度從O(n^3)降到了O(n)。這裏咱們借用React’s

diff algorithm中的一張圖來簡單說明一下：

 

當頁面的數據發生變化時，Diff算法只會比較同一層級的節點：

若是節點類型不一樣，直接幹掉前面的節點，再建立並插入新的節點，不會再比較這個節點之後的子節點了。

若是節點類型相同，則會從新設置該節點的屬性，從而實現節點的更新。

 

當某一層有不少相同的節點時，也就是列表節點時，Diff算法的更新過程默認狀況下也是遵循以上原則。

好比一下這個狀況：

 

 

咱們但願能夠在B和C之間加一個F，Diff算法默認執行起來是這樣的：

 

 

 要使用key來給每一個節點作一個惟一標識，Diff算法就能夠正確的識別此節點，找到正確的位置區插入新的節點。

 

 

因此一句話，key的做用主要是爲了高效的更新虛擬DOM。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是爲了讓vue能夠區分它們，不然vue只會替換其內部屬性而不會觸發過渡效果。

---

返回目錄