简述-什么是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

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