vue 虚拟dom算法解析

后边的都不要了

否

是

没有找到相同的节点

newStartVnode == null

oldStartId = oldEndId && newStartId = newEndId

oldStartNode == null

!idxInOld

newEndVnode == null

newEndNode = newNodeChild[--newEndId]

oldEndNode = oldNodeChild[--oldEndId]

newStartId newEndId

newStartNode = newNodeChild[++newStartId]

开始

oldKeyToId === undefined

typeof newTree.children[0] == \"string\"判断当前节点是否是文本节点

oldStartId = 0oldEndId = oldNodeChild.length - 1newStartId = 0newEndId = newNodeChild.length - 1oldStartNode = oldNodeChild[0]oldEndNode = oldNodeChild[oldEndId]newStartNode = newNodeChild[0]newEndNode = newNodeChild[newEndId]oldKeyToIdidxInOldelmToMovebefore

找到节点并移动

oldTreenewTree

oldStartNode = oldNodeChild[++oldStartId]

结束

oldEndVnode == null

根节点变化整体删除新建

oldStartId oldEndId

记录文本变化

后边的都新增

idxInOld = oldKeyToId[newStartNode.key]