Vue patchVnode流程图(vdom-diff算法)
2020-04-07 11:32:29 0 举报
Vue vdom-diff 流程图
作者其他创作
大纲/内容
--oldEndIdx--newEndIdx对比前一个
Y
N
++newStartIdxnewStartVnode往后移，比较下一个
newStartVnode跟oldVnode 中存在的节点是否相同
++oldStartIdx++newStartIdx对比下一个
--oldEndIdx对比前一个
oldVnode 与 vnode完全相同
当做新元素处理，新建
oldEndVnode不存在
结束
newStartVnode新增到oldVnode未处理的子元素之前
子节点是否相同
清空dom中的所有节点元素
删除oldStartIdx和 oldEndIdx之间未处理的旧元素
oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx
移动，将oldStartVnode移动到oldVnode 未处理节点之后
vnode是否有子节点
newStartVnode在 oldVnode中不存在
--oldEndIdx--newEndIdx
oldVnode 是否有子节点
patchVnode
vnode是否有text
oldStartVnode不存在
oldVnode 是否有文本
将对应的旧元素所在位置设为undefined，方便下次循环时跳过
vnode 和 oldVnode 都有子节点
newStartIdx > newEndIdx新元素节点循环结束
++oldStartIdx--newEndIdx
oldValue 与 vnode都是静态节点
清空dom中的文本
oldVnode 有text
移动，将oldEndVnode移动到oldVnode未处理节点之前
++oldStartIdx对比下一个
是否与 oldVnode的 text 一致
oldStartIdx > oldEndIdx旧元素节点循环先结束
updateChildren
清空文本
新建节点更新dom
替换dom中的文本
新增newStartIdx和 newEndIdx 之间未处理的新元素
0 条评论
回复 删除
下一页
