Vue Diff算法

218 阅读1分钟
  1. data变化触发def.notify。

  2. notify会调用patch(vnode, oldVNode)。通过isSameVNode判断,如果不是直接用新的VNode替换老的oldVNode。如果是需要调用patchNode进行处理

  3. 需要做如下判断:

  4. 如果vnode === oldVnode 直接返回。

  5. 如果vnode与oldVnode都有text内容,并且文字内容不同,更新dom元素的text内容。

  6. 如果都有子节点,调用updateChildren处理。如果oldVnode没有向元素内添加子节点。如果vnode没有子元素,删除dom中的子元素。

  7. updateChildren处理,会给vnode的子节点创建开始、结束指针,给oldVnode的子节点创建开始、结束指针。循环遍历,跳出条件是vnode和oldVnode的开始结束指针都必须开始指针<= 结束指针。

  8. 判断除掉oldVnode的null的子节点。

  9. 判断新老开始是否相同,是,patchVnode,新老开始指针++。

  10. 判断新老结束是否相同,是,patchVnode,新老结束指针++。

  11. 判断老开始&新结束是否相同,是,patchVnode,将Dom节点插入到oldVnode结束指针的后边。

  12. 判断新开始&老结束是否相同,是,patchVnode,将Dom节点插入到oldVnode开始指针的前边。

  13. 如果都没有匹配上通过key的hash在oldVnode的子节点中查找。找到了,patchVnode,移动到oldVnode的开始指针前边,没找到插入到oldVnode的开始指针前边。

  14. 循环执行完成之后判断是vnode执行结束还是oldVnode执行结束。如果vnode子节点执行结束,将oldVnode中剩余的删除。如果oldVnode子节点执行结束,将vnode子节点中没有添加的加入到对应的位置。