你怎麼理解vue中的diff演算法？
阿新 • • 發佈：2021-06-19
你怎麼理解vue中的diff演算法？
原始碼分析1：必要性，lifecycle.js-mountComponent（）
原始碼分析2：執行方式，patch.js-patchVnode（）
原始碼分析3：高效性，patch.js-updateChildren（）
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="demo"> <h1>虛擬DOM</h1> <p>{{ foo }}</p> </div> <script src="./js/vue.js"></script> <script> // 建立例項 const app = new Vue({ el: '#demo', data: { foo: 'foo' }, mounted () { setTimeout(() => { this.foo = 'foooooo' }, 1000) } }) </script> </body> </html>
總結
1.diff演算法是虛擬DOM技術的必然產物：通過新舊虛擬DOM作對比（即diff），將變化的地方更新在真
實DOM上；另外，也需要diff高效的執行對比過程，從而降低時間複雜度為O(n)。
2.vue 2.x中為了降低Watcher粒度，每個元件只有一個Watcher與之對應，只有引入diff才能精確找到
發生變化的地方。
3.vue中diff執行的時刻是元件例項執行其更新函式時，它會比對上一次渲染結果oldVnode和新的渲染
結果newVnode，此過程稱為patch。
4.diff過程整體遵循深度優先、同層比較的策略；兩個節點之間比較會根據它們是否擁有子節點或者文
本節點做不同操作；比較兩組子節點是演算法的重點，首先假設頭尾節點可能相同做4次比對嘗試，如果
沒有找到相同節點才按照通用方式遍歷查詢，查詢結束再按情況處理剩下的節點；藉助key通常可以非
常精確找到相同節點，因此整個patch過程非常高效。