讲讲Vue diff算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记 录的消息去局部更新Dom。

特点:

1. 比较只会在同层级进行, 不会跨层级比较
2. 在diff比较的过程中，循环从两边向中间比较

步骤:

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
3. 把第二棵树所记录的差异应用到第一棵树所构建的真正的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添加