Skip to content

Commit a917c05

Browse files
authoredAug 7, 2024··
fix(keep-alive): avoid cache suspense comment root (#11479)
1 parent 536f623 commit a917c05

File tree

2 files changed

+37
-0
lines changed

2 files changed

+37
-0
lines changed
 

‎packages/runtime-core/__tests__/components/Suspense.spec.ts

+30
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
KeepAlive,
99
Suspense,
1010
type SuspenseProps,
11+
createCommentVNode,
1112
h,
1213
nextTick,
1314
nodeOps,
@@ -2085,6 +2086,35 @@ describe('Suspense', () => {
20852086
expect(serializeInner(root)).toBe(`<div>async2</div>`)
20862087
})
20872088

2089+
test('KeepAlive + Suspense + comment slot', async () => {
2090+
const toggle = ref(false)
2091+
const Async = defineAsyncComponent({
2092+
render() {
2093+
return h('div', 'async1')
2094+
},
2095+
})
2096+
const App = {
2097+
render() {
2098+
return h(KeepAlive, null, {
2099+
default: () => {
2100+
return h(Suspense, null, {
2101+
default: toggle.value ? h(Async) : createCommentVNode('v-if'),
2102+
})
2103+
},
2104+
})
2105+
},
2106+
}
2107+
2108+
const root = nodeOps.createElement('div')
2109+
render(h(App), root)
2110+
expect(serializeInner(root)).toBe(`<!--v-if-->`)
2111+
2112+
toggle.value = true
2113+
await nextTick()
2114+
await Promise.all(deps)
2115+
expect(serializeInner(root)).toBe(`<div>async1</div>`)
2116+
})
2117+
20882118
// #6416 follow up / #10017
20892119
test('Suspense patched during HOC async component re-mount', async () => {
20902120
const key = ref('k')

‎packages/runtime-core/src/components/KeepAlive.ts

+7
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
getCurrentInstance,
99
} from '../component'
1010
import {
11+
Comment,
1112
type VNode,
1213
type VNodeProps,
1314
cloneVNode,
@@ -287,6 +288,12 @@ const KeepAliveImpl: ComponentOptions = {
287288
}
288289

289290
let vnode = getInnerChild(rawVNode)
291+
// #6028 Suspense ssContent maybe a comment VNode, should avoid caching it
292+
if (vnode.type === Comment) {
293+
current = null
294+
return vnode
295+
}
296+
290297
const comp = vnode.type as ConcreteComponent
291298

292299
// for async components, name check should be based in its loaded

0 commit comments

Comments
 (0)
Please sign in to comment.