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节点的更新过程,流程图如下:
图片转载至: