diff算法（核心）

 

 

ps：大體轉載知乎文章

vue和react的虛擬dom都採用相似的diff算法，核心大概能夠歸爲兩點

1,兩個相同的組件產生相似的DOM結構，不一樣的組件產生不一樣的DOM結構；

2，同一層級的一組節點，他們能夠經過惟一的id進行區分。

基於以上兩點假設，是的虛擬的DOM的Diff算法的複雜程度從O(n^3)降到了O(n)。

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

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

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

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

以下例子：

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

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

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

 

 因此一句話，key的做用就是爲了搞笑的更新虛擬DOM。另外vue中在使用相同標籤名元素的過分切換時，

也會使用到key屬性，其目的也是爲了讓vue能夠區分他們，不然vue只會替換其內部屬性而不觸發過渡效果。

ps：key最好不要用index，用單一的惟一的標記