1. 程式人生 > 實用技巧 >Vue 的diff演算法是什麼

Vue 的diff演算法是什麼

diff演算法就是當watcher監聽到資料有所改變時,需要更新DOM,此時會判斷新舊兩個 DOM樹和Vnode樹,然後差異性對比,最後將更新內容渲染到檢視層。

我們可以理解為有舊的Vnode陣列和新的Vnode陣列這兩個陣列

然後有四個變數充當指標分別指到兩個陣列的頭尾

重複下面的對比過程,直到兩個陣列中任一陣列的頭指標超過尾指標,迴圈結束

對比兩個陣列的頭部,如果找到,把新節點patch到舊節點,頭指標後移

對比兩個陣列的尾部,如果找到,把新節點patch到舊節點,尾指標前移

然後互相交叉對比,舊尾新頭,如果找到,把新節點patch到舊節點,並插入到正確位置,舊尾指標前移,新頭指標後移

繼續互相交叉對比,舊頭新尾,如果找到,把新節點patch到舊節點,並插入到正確位置,新尾指標前移,舊頭指標後移

都沒有,開始用新指標對應節點的key去舊陣列中直接找

i.如果沒有key,建立新的節點

ii.如果有key並且是相同的節點,把新節點patch到舊節點,並插入到正確位置

iii.如果有key但是不是相同的節點,建立新節點

迴圈結束後,

1.先對比舊陣列的頭尾指標,如果舊陣列遍歷完了(可能新陣列沒遍歷完,有漏新增的問題),新增新陣列中漏掉的節點 2.再對比新陣列的頭尾指標,如果新陣列遍歷完了(可能舊陣列沒遍歷完,有漏刪除的問題),刪除舊陣列中漏掉的節點