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