VNode diff算法的实现

[weijiyang]

详解vue的diff算法

diff 简述

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。 diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

diff 过程简述

• 首先vue diff是同级比较 并不会跨级比较
• 会通过 sameVnode (tag & data & key & input[type] & isComment) 方法判断oldNode vNode 两者是否需要值得比较 不需要直接vNode 替换 oldNode 值得比较的话调用 patchVnode 方法
• patchVnode 方法主要是将vNode 和oldNode el指向 和 text文本统一 判断是否均包含子节点 包括的调用 updateChildren 方法
• updateChildren这个方法通过递归方式来进行比较子节点（进行节点复用）
  1. oldNode[0] 是否能与vNode[0] vNode[vNode.length-1] 匹配上 顺序匹配
  2. oldNode[oldNode.length-1] 是否能与vNode[0] vNode[vNode.length-1] 匹配上 倒序匹配
  3. 以上情况不满足 如果oldNode vNode都有key 使用key来进行对比
  4. 当都没有key的时候会直接插入新dom 不复用( v-for 需要for的原因！！！)