根据新旧节点的对比结果,更新DOM元素,此过程并不改变新旧节点的排序。序号指向正在处理的节点,分别是新旧节点的起始和结尾节点。对比过程以新起始节点为主导,对比方向是由两侧向中间。优先比对新旧节点的起始节点和结尾节点,再查找与新起始节点相同的且未处理的旧节点。当旧节点全部处理完(旧起始和结尾序号重叠),此时新节点可能未处理完,就添加新节点DOM元素。当新节点全部处理完(新起始和结尾序号重叠),可能存在旧节点,就删除旧节点DOM元素。
具体流程如下:
新旧子节点的起始序号不大于结尾序号时,执行以下流程:
a)如果旧子节点两侧存在
undefined节点旧起始节点
undefined,
oldStartVnode = oldCh[++oldStartIdx]旧结尾节点
undefined,
oldEndVnode = oldCh[--oldEndIdx]b)新旧子节点的起始节点相同(前后比较)
patchVNode更新DOM内容
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]c)新旧子节点的结尾节点相同(前后比较)
patchVNode更新DOM内容
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]d)旧起始节点和新结尾节点相同(前后比较)
patchVNode更新DOM内容将旧起始节点DOM添加到旧结尾节点DOM前面
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]e)旧结尾节点和新起始节点相同(前后比较)
patchVNode更新DOM内容将旧结尾节点DOM添加到旧起始节点DOM前面
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]f)其他(缓存尚未处理的旧节点key值,依此判断旧节点中是否存在和新起始节点相同的节点)
a)尚未处理的旧节点中不存在与新起始节点相同的节点
创建新节点DOM并添加到旧起始节点DOM的前面
newStartVnode = newCh[++newStartIdx]b)旧节点中存在与新起始节点key相同的节点
a)旧节点中存在与新起始节点相同的节点










