-
diff算法主要描述了当数据发生改变时DOM都经历了什么。它的执行过程就是调用patch函数,比较新旧节点。
-
patch(oldVnode, newVnode)函数接收两个参数分别代表新节点和旧节点,通过比较oldVnode和newVnode是否相同,即函数sameVnode(oldVnode,vnode),根据这个函数的返回结果分两种情况:
-
true:执行patchVnode
-
false:用vnode替换oldVnode,将vnode添加到DOM中
-
patchVnode函数:
- 找到对应的真实DOM,成为el
- 判断vnode和oldVnode是否指向同一个对象。
-
如果true(节点的 key 和 sel 相同),直接return
-
如果都有文本节点并且不相等,那么将el的文本节点设置为vnode的文本节点。
-
如果oldVnode有子节点而vnode没有,则删除el的子节点。
-
如果oldVnode没有子节点而vnode有,则将vnode的子节点真实化之后添加到el
-
如果两者都有子节点,则执行updateChildren函数比较子节点
-
在updateChildren函数中,使用while循环遍历下面的子节点,并通过回调sameVnode方法继续进行判断,知道子节点对比完成。