vue-diff流程
2024-04-24 15:49:59 1 举报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所对应的节点前面
说明老子节点长度小于新子节点的长度
收藏
0 条评论
下一页
