解析Vue3patch核心算法patchKeyedChildren
- locate:
runtime-core > renderer > baseCreateRenderer > patchKeyedChildren
- patchKeyedChildren是patch算法中较为复杂的一段,更是vue技术栈面试的高频点,最初我是在vue3.0 beta版本时大概看过源码,后来在《vue设计与分析》中看了霍春阳大佬的解析,本篇就简要分析一下做个记录
- 首先patchKeyedChildren是在子列表对比并且有key的情况会进入,并且逻辑大致分为5步,这个看源码官方注释就可以看出
第一步,从前向后遍历
这一步是从节点组头部向尾部遍历,如果遍历过程中遇到相似节点,就进行patch对比,否则就退出遍历,并记录当前遍历的最新下标
while (i <= e1 && i <= e2) {
const n1 = c1[i]
const n2 = (c2[i] = optimized
? cloneIfMounted(c2[i] as VNode)
: normalizeVNode(c2[i]))
if (isSameVNodeType(n1, n2)) {
patch(
n1,
n2,
container,
null,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
} else {
break
}
i++
}
第二步,从后向前遍历
从后向前遍历,如果遇到第一步记录的下标就停止,然后遍历过程中,如果遇到相似节点也是直接进行patch对比,如果不相同就是直接退出遍历,并且记录旧节点组和新节点组的尾指针
while (i <= e1 && i <= e2) {
const n1 = c1[e1]
const n2 = (c2[e2] = optimized
? cloneIfMounted(c2[e2] as VNode)
: normalizeVNode(c2[e2]))
if (isSameVNodeType(n1, n2)) {
patch(
n1,
n2,
container,
null,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
} else {
break
}
e1--
e2--
}
第三步,检查旧节点组
这一步就是检查旧节点组在上两步的遍历后是否遍历完,如果遍历完,那么新节点组没有遍历完的就都是新的dom,可以全部当作新增节点进行挂载处理
if (i > e1) {
if (i <= e2) {
const nextPos = e2 + 1
const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
while (i <= e2) {
// patch第一个参数为null,就是代表没有旧节点,直接将新节点插入
patch(
null,
(c2[i] = optimized
? cloneIfMounted(c2[i] as VNode)
: normalizeVNode(c2[i])),
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
i++
}
}
}
第四步,检查新节点组
如果上一步检查旧节点未遍历完,那么就检查新节点组是否遍历完,如果遍历完,那么旧的节点组剩余的节点说明都是要卸载的,因为都不需要了
else if (i > e2) {
// 旧子节点未被遍历完
while (i <= e1) {
unmount(c1[i], parentComponent, parentSuspense, true)
i++
}
}
第五步,未知序列
- 如果新旧节点组都未遍历完,说明存在未知序列,可能存在位移等情况,就需要进一步处理
- 首先创建一个数组,用于记录新旧节点的对应关系
// toBePatched是新序列的节点数量 e2 - s2 + 1
const newIndexToOldIndexMap = new Array(toBePatched)
for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
- 然后会遍历旧节点组,这里会用两个变量记录
let moved = false
:位移标识,用于判断是否需要位移let patched = 0
:记录已执行patch的新节点数量,用于处理如果在更新时更新过的数量大于需要更新的节点数量,就卸载对应旧节点
for (i = s1; i <= e1; i++) {
const prevChild = c1[i]
// 如果已更新数量大于新节点数量,就卸载节点
if (patched >= toBePatched) {
unmount(prevChild, parentComponent, parentSuspense, true)
continue
}
let newIndex //新旧节点key相同的新节点index
if (prevChild.key != null) {
newIndex = keyToNewIndexMap.get(prevChild.key)
} else {
for (j = s2; j <= e2; j++) {
if (
newIndexToOldIndexMap[j - s2] === 0 &&
isSameVNodeType(prevChild, c2[j] as VNode)
) {
newIndex = j
break
}
}
}
// 如果newIndex为空,则说明未找到与旧节点对应的新节点,直接卸载
if (newIndex === undefined) {
unmount(prevChild, parentComponent, parentSuspense, true)
} else {
// 更新新旧节点关系表
newIndexToOldIndexMap[newIndex - s2] = i + 1
/**
* 这里的maxNexIndexSoFar是记录每次patch最大index
* 也是用于判断是否产生了位移,因为如果新节点index比最大index小,就说明发生了位移
* 例如:
* (a b) c
* (a c b)
* 在新旧序列对比b,c时,由于c最新的newIndex已经小于b对应的newIndex,因此会记录需要位移
*/
if (newIndex >= maxNewIndexSoFar) {
maxNewIndexSoFar = newIndex
} else {
moved = true
}
patch(
prevChild,
c2[newIndex] as VNode,
container,
null,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
patched++
}
}
- 遍历完旧序列后,就需要确定如何位移
- 首先是根据新旧节点关系表生成最长递增子序列(这个算法就不陈述了,较复杂,可以看精读《DOM diff 最长上升子序列》),然后倒序遍历新子节点
// 最长递增子序列
const increasingNewIndexSequence = moved
? getSequence(newIndexToOldIndexMap)
: EMPTY_ARR
j = increasingNewIndexSequence.length - 1
// 从新序列尾部向前遍历,目的是为了使用上一个遍历的节点做锚点
for (i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i
const nextChild = c2[nextIndex] as VNode
// 如果是序列的最后一个节点,anchor就是父节点对应的anchor,否则就是上一个子节点
const anchor =
nextIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
// 如果newIndexToOldIndexMap[i]还是0,那么说明新节点没有对应的旧节点,说明是新节点,直接挂载
if (newIndexToOldIndexMap[i] === 0) {
patch(
null,
nextChild,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
} else if (moved) {
// 然后在moved为true的情况下,如果最长子序列为空或者最长子序列和当前访问的新节点index不同,说明就需要进行位移
if (j < 0 || i !== increasingNewIndexSequence[j]) {
move(nextChild, container, anchor, MoveType.REORDER)
} else {
j--
}
}
}