diff算法主要描述了當數據發生改變時dom都經歷了什麼
當開發者更改了一處代碼進行保存之後,會調用Object.defineProperty中的set方法,set方法會調用Dep.notify方法通知所有訂閱者Watcher,訂閱者就會調用patch方法去進行dom的判斷
在patch方法中會調用sameVnode方法
通過sameVnode方法判斷newNode與oldNode是否相同
如果不相同,直接銷燬oldNode,將newNode添加到dom中
如果相同,則調用patchVnode方法比較下屬節點
如果
oldVnode
有子節點而newNode沒有,則刪除dom的子節點如果他們都有文本節點並且不相等,那麼將dom的文本節點設置爲newNode的文本節點。
如果oldVnode
沒有子節點而newNode有,則將newNode的子節點真實化之後添加到dom如果兩者都有子節點,則執行
updateChildren
函數比較子節點在
updateChildren函數中,使用
while循環遍歷下面的子節點,並通過回調sameVnode方法繼續進行判斷,直到子節點對比完成
以上就是dom節點的更新過程,流程圖如下:
圖片轉載至: