diff算法

182 阅读1分钟
  • diff算法主要描述了当数据发生改变时DOM都经历了什么。它的执行过程就是调用patch函数,比较新旧节点。

  • patch(oldVnode, newVnode)函数接收两个参数分别代表新节点和旧节点,通过比较oldVnode和newVnode是否相同,即函数sameVnode(oldVnode,vnode),根据这个函数的返回结果分两种情况:

  • true:执行patchVnode

  • false:用vnode替换oldVnode,将vnode添加到DOM中

  • patchVnode函数:

  1. 找到对应的真实DOM,成为el
  2. 判断vnode和oldVnode是否指向同一个对象。
  • 如果true(节点的 key 和 sel 相同),直接return

  • 如果都有文本节点并且不相等,那么将el的文本节点设置为vnode的文本节点。

  • 如果oldVnode有子节点而vnode没有,则删除el的子节点。

  • 如果oldVnode没有子节点而vnode有,则将vnode的子节点真实化之后添加到el

  • 如果两者都有子节点,则执行updateChildren函数比较子节点

  • 在updateChildren函数中,使用while循环遍历下面的子节点,并通过回调sameVnode方法继续进行判断,知道子节点对比完成。