diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记 录的消息去局部更新Dom。
特点:
- 比较只会在同层级进行, 不会跨层级比较
- 在diff比较的过程中，循环从两边向中间比较
步骤:
- 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
- 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
- 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了
1:patch函数中对新老节点比较
如果新节点不存在,就销毁老节点
如果老节点不存在就创建新节点
新老节点相同就进入patchVnode比较节点内部
2:patchVnode比较节点内部,如果相同则返回Vnode的children
再分情况:
有新children,没有旧children,创建新的
有旧children,没有新children,删除旧的
新旧都有,执行updateChildren比较children差异
这里就是diff算法核心,当前vnode的children为textnode,更新到text
3;updateChildren函数子节点比较
1:头头比较,相似,则新旧头指针后移,真实dom不变,进入下一次循环,不相似.进入2步
2:尾尾比较,相似,则新旧尾指针前移,真实dom不变,进入下一次循环,不相似,进入3步
3:头尾比较,相似,旧头指针后移,新尾指针前移,未确认dom序列中的头移到尾,进入下一次循环,不相似,进入4步
4:尾头比较,相似,旧尾指针前移,新头指针后移,未确认dom序列中的尾移到头,进入下一次循环,不相似,进入5步
5:若节点中的key在旧子节点中找到samevnode(tag和key都一致),则将其dom移到真实dom序列的头部,新头指针后移,否则vnode的dom插入到真实dom头部,新头指针后移
当循环结束后有两种情况考虑:
新的子节点数组被遍历完,将多余的旧dom删除;
旧的子节点数组被便利完,将多余的新dom添加
标签：Vue,讲讲,dom,节点,diff,比较,children,指针 From： https://www.cnblogs.com/qianduan-Wu/p/16725008.html