fix(hydration): handle v-if node mismatch

[edison1105]

close #12782

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+60 B)	38 kB (+32 B)	34.3 kB (+31 B)
vue.global.prod.js	158 kB (+60 B)	57.9 kB (+30 B)	51.5 kB (+59 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.2 kB	16.6 kB
createApp	54.3 kB	21.2 kB	19.3 kB
createSSRApp	58.6 kB (+60 B)	22.9 kB (+26 B)	20.9 kB (+22 B)
defineCustomElement	59.2 kB	22.8 kB	20.7 kB
overall	68.4 kB	26.3 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12801

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12801

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12801

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12801

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12801

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12801

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12801

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12801

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12801

vue

npm i https://pkg.pr.new/vue@12801

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12801

commit: b2efba8

[skirtles-code]

It seems like this adds a new type of allowable mismatch. Is there any precedent for this type of mismatch?

If we want to allow this then we may need to consider similar cases, like:

• Playground 1 - (flipping true and false the other way)
• Playground 2 (with v-else)

Those seem essentially the same to me.

[skirtles-code]

If a node has data-allow-mismatch="class" then I wouldn't expect it to suppress hydration errors for unexpected comment nodes.