From 485871dc3b0bbf897937b12f5ed986a10146c753 Mon Sep 17 00:00:00 2001
From: yangchangtao <yangchangtao@kuaishou.com>
Date: Thu, 15 Aug 2024 15:49:31 +0800
Subject: [PATCH 1/2] fix(runtime-core): fix nonHydratedAsyncRoot update and
 execution timing

---
 .../__tests__/components/Suspense.spec.ts       | 17 +++++++++++++++--
 packages/runtime-core/src/renderer.ts           |  4 ++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 65e801de277..8da9a2017df 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -573,7 +573,14 @@ describe('Suspense', () => {
     const Comp: ComponentOptions<{ data: string }> = {
       props: ['data'],
       setup(props) {
-        return () => h(Async, { 'data-test': props.data })
+        const val = ref('1')
+        onMounted(async () => {
+          val.value = '2'
+          await new Promise(r => setTimeout(r, 5))
+          val.value = '1'
+        })
+        return () =>
+          h(Async, { 'data-test': props.data, 'data-val': val.value })
       },
     }
 
@@ -595,7 +602,13 @@ describe('Suspense', () => {
     render(h(Root), root)
     expect(serializeInner(root)).toBe(`<div>fallback</div>`)
     await mounted
-    expect(serializeInner(root)).toBe(`<div data-test="2">async</div>`)
+    expect(serializeInner(root)).toBe(
+      `<div data-test="2" data-val="2">async</div>`,
+    )
+    await new Promise(r => setTimeout(r, 5))
+    expect(serializeInner(root)).toBe(
+      `<div data-test="2" data-val="1">async</div>`,
+    )
   })
 
   test('nested suspense (parent resolves first)', async () => {
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 3d1cc6849c7..29c3328fa91 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1435,10 +1435,10 @@ function baseCreateRenderer(
               updateComponentPreRender(instance, next, optimized)
             }
             // and continue the rest of operations once the deps are resolved
-            nonHydratedAsyncRoot.asyncDep!.then(() => {
+            nonHydratedAsyncRoot.asyncDep!.catch().then(() => {
               // the instance may be destroyed during the time period
               if (!instance.isUnmounted) {
-                componentUpdateFn()
+                update()
               }
             })
             return

From 9bac7637263eead620efc98056ee9764fc7738e6 Mon Sep 17 00:00:00 2001
From: yangchangtao <yangchangtao@kuaishou.com>
Date: Thu, 15 Aug 2024 15:54:14 +0800
Subject: [PATCH 2/2] chore: update

---
 packages/runtime-core/src/renderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 29c3328fa91..87c8d8ccde2 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1435,7 +1435,7 @@ function baseCreateRenderer(
               updateComponentPreRender(instance, next, optimized)
             }
             // and continue the rest of operations once the deps are resolved
-            nonHydratedAsyncRoot.asyncDep!.catch().then(() => {
+            nonHydratedAsyncRoot.asyncDep!.then().then(() => {
               // the instance may be destroyed during the time period
               if (!instance.isUnmounted) {
                 update()