fix(hydration): the component vnode's el should be updated when a mismatch occurs.

[linzhe141]

close #12253

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+32 B)	38 kB (+13 B)	34.2 kB (+13 B)
vue.global.prod.js	159 kB (+32 B)	57.9 kB (+14 B)	51.5 kB (+22 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.7 kB
createApp	55 kB	21.3 kB	19.4 kB
createSSRApp	59 kB (+37 B)	23 kB (+15 B)	20.9 kB
defineCustomElement	59.8 kB	22.8 kB	20.8 kB
overall	68.7 kB	26.3 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12255

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12255

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12255

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12255

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12255

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12255

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12255

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12255

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12255

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12255

vue

pnpm add https://pkg.pr.new/vue@12255

commit: b238dde

[yangxiuxiu1115]

Maybe just re-update the el after hydateNode
initialVNode.el = instance.subTree.el

core/packages/runtime-core/src/renderer.ts

Lines 1324 to 1333 in ed01d92

	hydrateNode!(
	el as Node,
	instance.subTree,
	instance,
	parentSuspense,
	null,
	)
	if (__DEV__) {
	endMeasure(instance, `hydrate`)
	}

[edison1105]

The vnode.el needs to be updated only if a mismatch occurs.
So this is not the proper fix. The correct fix should be in the handleMismatch function.

• update vnode.el as follows:

  core/packages/runtime-core/src/components/Suspense.ts

  Lines 896 to 897 in ed01d92

  	parentComponent.vnode.el = el
  	updateHOCHostEl(parentComponent, el)