chore: improve code

Author: edison1105

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

@@ -540,6 +540,98 @@ describe('Suspense', () => {
     expect(unmounted).not.toHaveBeenCalled()
   })
 
+  //#10042
+  test('unmount nested suspense before parent suspense resolve', async () => {
+    const calls: string[] = []
+
+    const outerToggle = ref(true)
+    const innerToggle = ref(true)
+
+    const InnerA = defineAsyncComponent(
+      {
+        setup: () => {
+          onUnmounted(() => {
+            calls.push('innerA unmounted')
+          })
+          return () => h('div', 'innerA')
+        },
+      },
+      10,
+    )
+
+    const OuterA = defineAsyncComponent(
+      {
+        setup: () => {
+          onUnmounted(() => {
+            calls.push('outerA unmounted')
+          })
+          return () =>
+            h(Fragment, null, [
+              h('div', 'outerA'),
+              innerToggle.value
+                ? h(Suspense, null, { default: h(InnerA) })
+                : h('div', 'innerB'),
+            ])
+        },
+      },
+      5,
+    )
+
+    const OuterB = defineAsyncComponent(
+      {
+        setup: () => {
+          onUnmounted(() => {
+            calls.push('outerB unmounted')
+          })
+          return () => h('div', 'outerB')
+        },
+      },
+      5,
+    )
+
+    const Comp = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: h(outerToggle.value ? OuterA : OuterB),
+            fallback: h('div', 'fallback outer'),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
+
+    // mount outer component
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerA</div><!---->`)
+
+    // mount inner component
+    await Promise.all(deps)
+    await nextTick()
+
+    expect(serializeInner(root)).toBe(`<div>outerA</div><div>innerA</div>`)
+
+    deps.length = 0
+
+    // toggle both outer and inner components
+    outerToggle.value = false
+    innerToggle.value = false
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerA</div><div>innerB</div>`)
+    expect(calls).toEqual([])
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerB</div>`)
+
+    expect(calls).toEqual(['innerA unmounted', 'outerA unmounted'])
+  })
+
   // vuetifyjs/vuetify#15207
   test('update prop of async element before suspense resolve', async () => {
     let resolve: () => void

packages/runtime-core/src/renderer.ts

@@ -375,6 +375,22 @@ function baseCreateRenderer(
     // patching & not same type, unmount old tree
     if (n1 && !isSameVNodeType(n1, n2)) {
       anchor = getNextHostNode(n1)
+      if (parentSuspense && parentSuspense.deps > 0) {
+        parentSuspense.preEffects.push(() => {
+          patch(
+            n1,
+            n2,
+            container,
+            anchor,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized,
+          )
+        })
+        return
+      }
       unmount(n1, parentComponent, parentSuspense, true)
       n1 = null
     }
@@ -2134,13 +2150,7 @@ function baseCreateRenderer(
       unmountComponent(vnode.component!, parentSuspense, doRemove)
     } else {
       if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
-        if (parentSuspense && parentSuspense.deps > 0) {
-          parentSuspense.preEffects.push(() => {
-            vnode.suspense!.unmount(parentSuspense, doRemove)
-          })
-        } else {
-          vnode.suspense!.unmount(parentSuspense, doRemove)
-        }
+        vnode.suspense!.unmount(parentSuspense, doRemove)
         return
       }
 
@@ -2181,13 +2191,7 @@ function baseCreateRenderer(
       }
 
       if (doRemove) {
-        if (parentSuspense && parentSuspense.deps > 0) {
-          parentSuspense.preEffects.push(() => {
-            remove(vnode)
-          })
-        } else {
-          remove(vnode)
-        }
+        remove(vnode)
       }
     }