fix(KeepAlive): properly cache nested Suspense subtree (vuejs#10912)

* fix(KeepAlive): properly cache nested Suspense subtree

* test: add test case

* chore: add comments

* Update KeepAlive.ts

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

@@ -2021,7 +2021,7 @@ describe('Suspense', () => {
  viewRef.value = 0
  await nextTick()
 
- expect(serializeInner(root)).toBe('<!---->')
+ expect(serializeInner(root)).toBe('<div>sync</div>')
 
  await Promise.all(deps)
  await nextTick()
@@ -2035,6 +2035,56 @@ describe('Suspense', () => {
  expect(serializeInner(root)).toBe(`<div>sync</div>`)
  })
 
+ // #10899
+ test('KeepAlive + Suspense switch before branch resolves', async () => {
+ const Async1 = defineAsyncComponent({
+ render() {
+ return h('div', 'async1')
+ },
+ })
+ const Async2 = defineAsyncComponent({
+ render() {
+ return h('div', 'async2')
+ },
+ })
+ const components = [Async1, Async2]
+ const viewRef = ref(0)
+ const root = nodeOps.createElement('div')
+ const App = {
+ render() {
+ return h(KeepAlive, null, {
+ default: () => {
+ return h(Suspense, null, {
+ default: h(components[viewRef.value]),
+ fallback: h('div', 'loading'),
+ })
+ },
+ })
+ },
+ }
+ render(h(App), root)
+ expect(serializeInner(root)).toBe(`<div>loading</div>`)
+
+ // switch to Async2 before Async1 resolves
+ viewRef.value = 1
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>loading</div>`)
+
+ await Promise.all(deps)
+ await nextTick()
+ expect(serializeInner(root)).toBe('<div>async2</div>')
+
+ viewRef.value = 0
+ await nextTick()
+ await Promise.all(deps)
+ expect(serializeInner(root)).toBe(`<div>async1</div>`)
+
+ viewRef.value = 1
+ await nextTick()
+ await Promise.all(deps)
+ expect(serializeInner(root)).toBe(`<div>async2</div>`)
+ })
+
  // #6416 follow up / #10017
  test('Suspense patched during HOC async component re-mount', async () => {
  const key = ref('k')

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

@@ -228,7 +228,15 @@ const KeepAliveImpl: ComponentOptions = {
  const cacheSubtree = () => {
  // fix #1621, the pendingCacheKey could be 0
  if (pendingCacheKey != null) {
- cache.set(pendingCacheKey, getInnerChild(instance.subTree))
+ // if KeepAlive child is a Suspense, it needs to be cached after Suspense resolves
+ // avoid caching vnode that not been mounted
+ if (isSuspense(instance.subTree.type)) {
+ queuePostRenderEffect(() => {
+ cache.set(pendingCacheKey!, getInnerChild(instance.subTree))
+ }, instance.subTree.suspense)
+ } else {
+ cache.set(pendingCacheKey, getInnerChild(instance.subTree))
+ }
  }
  }
  onMounted(cacheSubtree)