vue-diff流程

删除oldS到oldE之间的老子节点对应的DOM

oldEVnode和newSVnode是否相同

开始

否

oldEVnode = oldCh[--oldE]newEVnode = newCh[--newE]

oldSVnode = oldCh[++oldS]newEVnode = newCh[--newE]

新节点是否有children

设置新老子节点起始点为0结束点为length-1

以newS到newE之间的新子节点创建DOM

是

结束

依据newSVnode创建新的DOM

oldSVnode = oldCh[++oldS]newSVnode = newCh[++newS]

patchVnode

新旧虚拟节点的子节点对比

newSVnode = newCh[++newS]

说明新子节点长度小于老子节点的长度

有

新老节点文本是否一致

创建新节点对应的DOM

  patch

老节点是否有children

新节点文本替换老节点文本

把oldS到oldE之间的虚拟节点以KEY和Index构成一个映射表

通过key和tag判断新老节点是不是同一个节点（sameVnode）

删除老的节点的DOM并创建新的节点的DOM

删除老节点的children对应的DOM

是否有新节点

updateChildren

oldSVnode 和newSVnode相同（sameVnode）

oldEVnode = oldCh[--oldE]newSVnode = newCh[++newS]

把oldSVnode所对应的DOM移动到oldEVnode所对应的DOM后面

是否有老节点

新节点是否有文本

newS > newE

oldS < oldE && newS < newE 

判断新老节点是不是同一个对象

oldEVnode和newEVode是否相同

以新节点的children创建DOM

oldSVnode和newEVnode是否相同

根据newSVnode的key在映射表中是否能找到

把oldEVnode所对应的DOM移动到oldSVnode所对应的DOM前面

删除老节点对应的DOM

把匹配节点所对应的DOM移动到oldSVnode所对应的DOM前面

把新的DOM放在oldSVnode所对应的节点前面

说明老子节点长度小于新子节点的长度