Vue3之Diff算法源码分析(1)，头条三面技术四面HR

container: RendererElement,

parentAnchor: RendererNode | null,

parentComponent: ComponentInternalInstance | null,

parentSuspense: SuspenseBoundary | null,

isSVG: boolean,

slotScopeIds: string[] | null,

optimized: boolean

) => {

let i = 0

const l2 = c2.length

let e1 = c1.length - 1 // prev ending index

let e2 = l2 - 1 // next ending index

// 1. sync from start

// (a b) c

// (a b) d e

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++

}

// 2. sync from end

// a (b c)

// d e (b c)

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–

}

// 3. common sequence + mount

// (a b)

// (a b) c

// i = 2, e1 =