Skip to content

Commit

Permalink
fix(hydration): the component vnode's el should be updated when a mis…
Browse files Browse the repository at this point in the history
…match occurs. (vuejs#12255)

close vuejs#12253
  • Loading branch information
linzhe141 authored Nov 15, 2024
1 parent 352bc88 commit a20a4cb
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
40 changes: 40 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
h,
nextTick,
onMounted,
onServerPrefetch,
openBlock,
reactive,
ref,
Expand Down Expand Up @@ -518,6 +519,45 @@ describe('SSR hydration', () => {
)
})

test('with data-allow-mismatch component when using onServerPrefetch', async () => {
const Comp = {
template: `
<div>Comp2</div>
`,
}
let foo: any
const App = {
setup() {
const flag = ref(true)
foo = () => {
flag.value = false
}
onServerPrefetch(() => (flag.value = false))
return { flag }
},
components: {
Comp,
},
template: `
<span data-allow-mismatch>
<Comp v-if="flag"></Comp>
</span>
`,
}
// hydrate
const container = document.createElement('div')
container.innerHTML = await renderToString(h(App))
createSSRApp(App).mount(container)
expect(container.innerHTML).toBe(
'<span data-allow-mismatch=""><div>Comp2</div></span>',
)
foo()
await nextTick()
expect(container.innerHTML).toBe(
'<span data-allow-mismatch=""><!--v-if--></span>',
)
})

test('Teleport unmount (full integration)', async () => {
const Comp1 = {
template: `
Expand Down
6 changes: 6 additions & 0 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
import type { TeleportImpl, TeleportVNode } from './components/Teleport'
import { isAsyncWrapper } from './apiAsyncComponent'
import { isReactive } from '@vue/reactivity'
import { updateHOCHostEl } from './componentRenderUtils'

export type RootHydrateFunction = (
vnode: VNode<Node, Element>,
Expand Down Expand Up @@ -716,6 +717,11 @@ export function createHydrationFunctions(
getContainerType(container),
slotScopeIds,
)
// the component vnode's el should be updated when a mismatch occurs.
if (parentComponent) {
parentComponent.vnode.el = vnode.el
updateHOCHostEl(parentComponent, vnode.el)
}
return next
}

Expand Down

0 comments on commit a20a4cb

Please sign in to comment.