diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts index 65e801de277..354e33b8cfb 100644 --- a/packages/runtime-core/__tests__/components/Suspense.spec.ts +++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts @@ -15,6 +15,7 @@ import { onErrorCaptured, onMounted, onUnmounted, + onUpdated, ref, render, resolveDynamicComponent, @@ -2161,6 +2162,81 @@ describe('Suspense', () => { await Promise.all(deps) }) + //#11617 + test('update async component before resolve then update again', async () => { + const arr: boolean[] = [] + const Child = { + props: ['loading'], + async setup(props: any) { + onUpdated(() => { + arr.push(props.loading) + }) + await 1 + return () => { + const loading = props.loading + return h('div', null, loading ? '1' : '2') + } + }, + } + + const Parent = defineComponent({ + setup() { + const loading = ref(false) + const delay = (delayInms: any) => { + return new Promise(resolve => setTimeout(resolve, delayInms)) + } + onMounted(async () => { + loading.value = true + await delay(1000) + loading.value = false + await nextTick() + expect(arr).toEqual([true, false]) + }) + return () => { + return h(Child, { loading: loading.value }) + } + }, + }) + + const RouterView = { + props: { + name: { type: Object }, + }, + setup(props: any) { + return () => { + const name = props.name + return h(name) + } + }, + } + const App = { + setup() { + const Dummy = { + setup() { + return () => { + return h('div', null, 'dummy') + } + }, + } + + const flag: any = shallowRef(Dummy) + + onMounted(() => { + flag.value = Parent + }) + return () => { + return h(Suspense, null, { + default: () => h(RouterView, { name: flag.value }), + }) + } + }, + } + + const root: any = nodeOps.createElement('div') + + render(h(App), root) + }) + describe('warnings', () => { // base function to check if a combination of slots warns or not function baseCheckWarn( diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 90cc22f5470..d208c04a1cd 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -1444,9 +1444,9 @@ function baseCreateRenderer( // and continue the rest of operations once the deps are resolved nonHydratedAsyncRoot.asyncDep!.then(() => { // the instance may be destroyed during the time period - if (!instance.isUnmounted) { - componentUpdateFn() - } + queuePostRenderEffect(() => { + if (!instance.isUnmounted) update() + }, parentSuspense) }) return }