diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts index cb8ece4873e..64e2b765ba8 100644 --- a/packages/runtime-core/__tests__/components/Suspense.spec.ts +++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts @@ -221,6 +221,57 @@ describe('Suspense', () => { ]) }) + // #1059 + test('mounted/updated hooks & fallback component', async () => { + const deps: Promise[] = [] + const calls: string[] = [] + const toggle = ref(true) + + const Async = { + async setup() { + const p = new Promise(r => setTimeout(r, 1)) + // extra tick needed for Node 12+ + deps.push(p.then(() => Promise.resolve())) + + await p + return () => h('div', 'async') + } + } + + const Fallback = { + setup() { + onMounted(() => { + calls.push('mounted') + }) + + onUnmounted(() => { + calls.push('unmounted') + }) + return () => h('div', 'fallback') + } + } + + const Comp = { + setup() { + return () => + h(Suspense, null, { + default: toggle.value ? h(Async) : null, + fallback: h(Fallback) + }) + } + } + + const root = nodeOps.createElement('div') + render(h(Comp), root) + expect(serializeInner(root)).toBe(`
fallback
`) + expect(calls).toEqual([`mounted`]) + + await Promise.all(deps) + await nextTick() + expect(serializeInner(root)).toBe(`
async
`) + expect(calls).toEqual([`mounted`, `unmounted`]) + }) + test('content update before suspense resolve', async () => { const Async = defineAsyncComponent({ props: { msg: String }, diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index c31667458f9..e2f3f9f4b8f 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -1838,9 +1838,9 @@ function baseCreateRenderer( ) { queuePostRenderEffect(da, parentSuspense) } - queuePostFlushCb(() => { + queuePostRenderEffect(() => { instance.isUnmounted = true - }) + }, parentSuspense) // A component with async dep inside a pending suspense is unmounted before // its async dep resolves. This should remove the dep from the suspense, and