vue diff算法的详解

old有children，vnode没有

是

循环oldCh用sameVnode方法找到节点拿到key

否

vnode和oldNode完全相同

不存在

pathNode方法（更细粒度的去更新）

vnode有text属性

text不相等

直接添加add

vnode尾节点和oldnode尾节点是否相等

old有text，直接清空

多出的oldNode进行删除

updateChildren

使用patchNode进行详细的对比和更新操作

insertBefore插入，patch调用

oldnode节点第一个是否为空

删除oldNode

直接退出

不存在createElm直接创建

vnode和oldnode都是静态节点

直接替换text

更新节点的属性

newnode有key

有

newStart Vnode建立新的检查点

不是

diff更新逻辑描述：1.首先_update进入patch方法（更新全局的方法）；path：1.查看oldNode是否存在，不存在则创建createEl；2.比较oldNode和vNode是否相等（sameNode），不相等取oldNode的               parent添加到oldNode前面，删除oldNode；3.如果相等则进入patchNode。patchNode： patchNode属于递归调用。1.如果oldNode和vnode完全相同则跳出；2.如果oldNode和vNode属于静态方法直接跳出；                   3.更新静态属性；4.如果vnode有text属性，比较vnode.text和oldnode.text是否相等，不相等则直接更新；4.如果vnode                     没有text属性，且vnode和oldnode都有children，且children不同则进入，updateChildren；如果oldNode有children，                     vnode没有children则直接删除，如果vnode有children则添加。upDateChildren: 创建newstartNodeInd 、newEndNodeInd、oldstartNodeInd 、oldEndNodeInd、newNode、oldNode，利用while                         循环oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx; 1.oldstartNode为空，递归++；2.oldEndNode为空                       endInd--；3.前两步为缩小old空值，oldStartNode和newStartNode如果相等，patchNode递归，ldStartVnode =                           oldCh[++oldStartIdx]，newStartVnode = newCh[++newStartIdx]；4.尾部对比，同3；5.oldStartNode和                                     newEndNode对比，如果相等执行插入操作，；6.oldEndNode和newStartNode对比同5；7.都没有匹配到，且                               oldNode没有关系，建立oldNode index与key一一对应关系；7.如果newNode有key，则找到newNode与oldNode对                         应key的值；没有则通过sameVnode去查找；8.如果没有找到则创建，找到则进行深度比较，移动oldNode，清空当                         前；9.最后进行判断多的删除，少的添加。虚拟dom的优势以及必然性：dom渲染和js引擎不属于同一个线程，每次通信需要browse线程进行沟通开销巨大，真实的dom操作，如果同时执行十次操作会建立十次连接，虚拟dom通过AST进行解析，Node生成dom tree（一个对象），只操作dom，通过promise进行队列维护收集依赖，合并更新，通过新老vnode节点进行diff比较，找到最优的更新策略。watcher在2.0后加大了监控的颗粒度，进行组件间依赖收集。

没有

找到节点查看是否为同一根节点

移动到当前节点前面

直接删除

sameVnode判断节点是否相同

vnode和oldNode都有children

patchVnode，ldCh[idxInOld] = undefined

递归调用vnodeEnd--oldEnd--

children是否相等

找不到节点

oldNode和vnode是否是同一个节点

存在

oldStartVnode = oldCh[++oldStartIdx]；递归赋值

path方法

oldNode最后一个节点是否为空

更新updateChildren

vnode有childrenold没有

建立key和index的关系

oldVnode是否存在

用newNode的key建立关系

oldEndVnode = oldCh[--oldEndIdx]

使用oldNode的parent，使用vnode去创建真实节点并插入到oldnode后面

sameNode判断新老节点，只要不满足就删除老的节点去创建新的节点

递归调用patchnode，vnodeInd++、oldNodeInd++