簡述-什麼是diff算法

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節點的更新過程,流程圖如下:

 

 

圖片轉載至:

https://www.cnblogs.com/wind-lanyan/p/9061684.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章