vue页面更新patch的实现示例

2020-06-16 06:45:25易采站长站整理

根据新旧节点的对比结果,更新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)旧节点中存在与新起始节点相同的节点