虚拟dom中的diff算法

这里主要描述一下vue中虚拟dom中使用的diff算法。

1. 在vue中首先使用patch函数进行新旧Vnode的比较（注意：新旧Vnode均为对象），比较方式是选择器和key是否均相同。

• 若不相同，则将新的虚拟dom添加，旧的虚拟dom删除。
• 若相同，则执行patchVnode函数，进行新旧Vnode的内部对比。

2. 在patchVnode函数中，对比新旧Vnode节点中的情况主要有四种：

• 新Vnode无子节点、旧Vnode有子节点：
  删除旧Vnode子节点即可。

• 新Vnode有子节点、旧Vnode无子节点：
  添加新Vnode子节点即可。

• 新Vnode与旧Vnode均有文本子节点：
  替换为新的文本内容即可

• 新Vnode与旧Vnode均有children子节点：（重要）
  取newVnodeStartIdx、newVnodeEndIdx、oldVnodeStartIdx、oldVnodeEndIdx四个首位index。

  • 在newVnodeStartIdx <= newVnodeEndIdx && oldVnodeStartIdx <= oldVnodeEndIdx时，
    执行循环，每一次都把四个index互相对比，只要有相同的，则进行patch递归；若无一样的，则执行插入or删除（注意每一次的插入or删除会影响oldVnode的index取值）。

  • 在newVnodeStartIdx > newVnodeEndIdx || oldVnodeStartIdx > oldVnodeEndIdx

直接将另外剩余的元素进行删除or插入。

虚拟dom只会对同一个层级的元素进行对比，所以这里的diff算法复杂度就是O(n)