From: daiwei <daiwei521@126.com>
Date: Sun, 2 Mar 2025 14:28:36 +0000 (+0800)
Subject: chore: improve
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fheads%2Fedison%2Ffix%2FlazyHydrate;p=thirdparty%2Fvuejs%2Fcore.git

chore: improve
---

diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
index 2c0ac4b7d2..ac016e5bb6 100644
--- a/packages/runtime-core/src/apiAsyncComponent.ts
+++ b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -124,15 +124,22 @@ export function defineAsyncComponent<
 
     __asyncHydrate(el, instance, hydrate) {
       if (hydrateStrategy) {
-        let teardown: (() => void) | void
-        if (resolvedComp) {
-          teardown = hydrateStrategy(hydrate, cb => forEachElement(el, cb))
-        } else {
-          teardown = hydrateStrategy(
-            () => performLoad().then(() => !instance.isUnmounted && hydrate()),
-            cb => forEachElement(el, cb),
-          )
+        const hydrateWithCallback = (postHydrate?: () => void) => {
+          if (resolvedComp) {
+            hydrate()
+            postHydrate && postHydrate()
+          } else {
+            performLoad().then(() => {
+              if (!instance.isUnmounted) {
+                hydrate()
+                postHydrate && postHydrate()
+              }
+            })
+          }
         }
+        let teardown = hydrateStrategy(hydrateWithCallback, cb =>
+          forEachElement(el, cb),
+        )
         if (teardown) {
           ;(instance.bum || (instance.bum = [])).push(teardown)
         }
diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts
index 071ac819b6..0e99d6be02 100644
--- a/packages/runtime-core/src/hydrationStrategies.ts
+++ b/packages/runtime-core/src/hydrationStrategies.ts
@@ -18,7 +18,7 @@ const cancelIdleCallback: Window['cancelIdleCallback'] =
  *          listeners.
  */
 export type HydrationStrategy = (
-  hydrate: () => void | Promise<any>,
+  hydrate: (postHydrate?: () => void) => void,
   forEachElement: (cb: (el: Element) => any) => void,
 ) => (() => void) | void
 
@@ -29,7 +29,7 @@ export type HydrationStrategyFactory<Options> = (
 export const hydrateOnIdle: HydrationStrategyFactory<number> =
   (timeout = 10000) =>
   hydrate => {
-    const id = requestIdleCallback(hydrate, { timeout })
+    const id = requestIdleCallback(() => hydrate(), { timeout })
     return () => cancelIdleCallback(id)
   }
 
@@ -73,8 +73,9 @@ export const hydrateOnMediaQuery: HydrationStrategyFactory<string> =
       if (mql.matches) {
         hydrate()
       } else {
-        mql.addEventListener('change', hydrate, { once: true })
-        return () => mql.removeEventListener('change', hydrate)
+        const doHydrate = () => hydrate()
+        mql.addEventListener('change', doHydrate, { once: true })
+        return () => mql.removeEventListener('change', doHydrate)
       }
     }
   }
@@ -86,14 +87,14 @@ export const hydrateOnInteraction: HydrationStrategyFactory<
   (hydrate, forEach) => {
     if (isString(interactions)) interactions = [interactions]
     let hasHydrated = false
-    const doHydrate = async (e: Event) => {
+    const doHydrate = (e: Event) => {
       if (!hasHydrated) {
         hasHydrated = true
         teardown()
-        // eslint-disable-next-line no-restricted-syntax
-        await hydrate()
-        // replay event
-        e.target!.dispatchEvent(new (e.constructor as any)(e.type, e))
+        hydrate(() => {
+          // replay event
+          e.target!.dispatchEvent(new (e.constructor as any)(e.type, e))
+        })
       }
     }
     const teardown = () => {