你怎么理解vue中的diff算法？

#####源碼分析1：必要性，lifecycle.js–mountComponent()
vue中一個組件一個watcher實例，而組件中可能存在很多個data中的key的使用，為了精確地知道更新過程中到底哪里發生了變化，必須使用diff算法
#####源碼分析2：執行方式，patch.js–patchVnode()
patchVnode是diff發生的地方，整體方案：深度優先，同層比較
#####源碼分析3：高效性，patch.js–updateChildren()
算法優化點，先首位判斷，再順序判斷更新

結論（WWWH）

1.diff算法是虛擬DOM技術的必然產物：通過新舊虛擬DOM作對比（即diff），將變化的地方更新在真實DOM上；
另外，也需要diff高效的執行對比過程，從而降低時間復雜度為O(n)。(what)

2.vue2.x中為了降低Watcher粒度，每個組件只有一個Watcher與之對應，只有引入diff才能精確找到發生變化的地方。(why)

3.vue中diff執行的時刻是組件實例執行其更新函數時，它會比對上一次渲染結果oldVnode和新的渲染結果newVnode,此過程稱為patch。(where)

4.diff過程整體遵循深度優先、同層比較的策略；兩個節點之間比較會根據它們是否擁有子節點或者文本節點做不同操作；(How)
比較兩組子節點是算法的重點，首先假設頭尾節點可能相同做4次比對嘗試，如果沒有找到相同節點才按照通用方式遍歷查找，查找結束再按情況處理剩下的節點；
借助key通常可以非常精確找到相同節點，因此整個patch過程非常高效。

總結

以上是生活随笔為你收集整理的[Vue][面试]你怎么理解vue中的diff算法？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。