vue中Diff算法、key的作用原理

1、Diff算法步驟：

• 用js對象結構（虛擬DOM）表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
• 當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
• 把所記錄的差異應用到所構建的真正的DOM樹上，視圖就更新了

Diff 算法： 僅在同級的vnode間做diff，遞歸地進行同級vnode的diff，最終實現整個DOM樹的更新

2、key的作用原理：

• 唯一標識，爲了高效的更新虛擬DOM
• transition過渡時，使用key屬性，可以區分它們是否變化，否則vue只會替換其內部屬性而不會觸發過渡效果

添加key唯一標識後Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

<transition>
  <span :key="text">{{ text }}</span>
</transition>

text發生變化時，span會被replaced，而不會patched，因此transition會被觸發

列表節點時：在B和C之間加一個F

Diff算法默認執行把C更新成F，D更新成C，E更新成D，最後再插入E