一起看看v-for中key屬性的作用！

相關推薦：《vue.js教程》

#其實不只是vue，react中在執行清單渲染時也會要求給每個元件添加上key這個屬性。

要解釋key的作用，我得先介紹一下虛擬DOM的Diff演算法了。

我們知道，vue和react都實作了一套虛擬DOM，讓我們可以不直接操作DOM元素，只操作資料便可以重新渲染頁面。而隱藏在背後的原理便是其高效的Diff演算法。

vue和react的虛擬DOM的Diff演算法大致相同，其核心是基於兩個簡單的假設：

• 兩個相同的元件產生類似的DOM結構，不同的組件產生不同的DOM結構。

• 同一層級的一組節點，他們可以透過唯一的id來區分。

基於上述這兩點假設，使得虛擬DOM的Diff演算法的複雜度從O(n^3)降到了O(n)。

這裡我們借用React's diff algorithm中的一張圖來簡單說明一下：

當頁面的資料改變時，Diff演算法只會比較同一層級的節點：

如果節點類型不同，直接幹掉前面的節點，再建立並插入新的節點，就不會再比較這個節點以後的子節點了。

如果節點類型相同，則會重新設定該節點的屬性，從而實現節點的更新。

當某一層有許多相同的節點時，也就是列表節點時，Diff演算法的更新過程預設也是遵循以上原則。

例如以下這個情況：

我們希望可以在B和C之間加上一個F，Diff演算法預設執行起來是這樣的：

# 即把C更新成F，D更新成C，E更新成D，最後再插入E，是不是很沒有效率？

所以我們需要使用key來為每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

所以一句話，key的作用主要是為了有效率的更新虛擬DOM。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，

否則vue只會替換其內部屬性而不會觸發過渡效果。

更多程式相關知識，請造訪：程式設計教學！ ！

以上是一起看看v-for中key屬性的作用！的詳細內容。更多資訊請關注PHP中文網其他相關文章！