From: daiwei Date: Sun, 2 Mar 2025 06:23:52 +0000 (+0800) Subject: wip: save X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=b0366bdfbe0547c4ac31caa5e27515628ad1d5f9;p=thirdparty%2Fvuejs%2Fcore.git wip: save --- diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts index 199b451f66..2c0ac4b7d2 100644 --- a/packages/runtime-core/src/apiAsyncComponent.ts +++ b/packages/runtime-core/src/apiAsyncComponent.ts @@ -115,26 +115,33 @@ export function defineAsyncComponent< ) } + let performLoad: () => Promise + return defineComponent({ name: 'AsyncComponentWrapper', __asyncLoader: load, __asyncHydrate(el, instance, hydrate) { - const doHydrate = hydrateStrategy - ? () => { - const teardown = hydrateStrategy(hydrate, cb => - forEachElement(el, cb), - ) - if (teardown) { - ;(instance.bum || (instance.bum = [])).push(teardown) - } - } - : hydrate - if (resolvedComp) { - doHydrate() + 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), + ) + } + if (teardown) { + ;(instance.bum || (instance.bum = [])).push(teardown) + } } else { - load().then(() => !instance.isUnmounted && doHydrate()) + if (resolvedComp) { + hydrate() + } else { + load().then(() => !instance.isUnmounted && hydrate()) + } } }, @@ -166,19 +173,25 @@ export function defineAsyncComponent< (__FEATURE_SUSPENSE__ && suspensible && instance.suspense) || (__SSR__ && isInSSRComponentSetup) ) { - return load() - .then(comp => { - return () => createInnerComp(comp, instance) - }) - .catch(err => { - onError(err) - return () => - errorComponent - ? createVNode(errorComponent as ConcreteComponent, { - error: err, - }) - : null - }) + performLoad = () => + load() + .then(comp => { + return () => createInnerComp(comp, instance) + }) + .catch(err => { + onError(err) + return () => + errorComponent + ? createVNode(errorComponent as ConcreteComponent, { + error: err, + }) + : null + }) + + if (!hydrateStrategy) { + return performLoad() + } + return } const loaded = ref(false) @@ -203,19 +216,25 @@ export function defineAsyncComponent< }, timeout) } - load() - .then(() => { - loaded.value = true - if (instance.parent && isKeepAlive(instance.parent.vnode)) { - // parent is keep-alive, force update so the loaded component's - // name is taken into account - instance.parent.update() - } - }) - .catch(err => { - onError(err) - error.value = err - }) + performLoad = () => + load() + .then(() => { + loaded.value = true + if (instance.parent && isKeepAlive(instance.parent.vnode)) { + // parent is keep-alive, force update so the loaded component's + // name is taken into account + instance.parent.update() + } + }) + .catch(err => { + onError(err) + error.value = err + }) + + // lazy perform load if hydrate strategy is present + if (!hydrateStrategy) { + performLoad() + } return () => { if (loaded.value && resolvedComp) { diff --git a/packages/vue/__tests__/e2e/hydration-strat-idle.html b/packages/vue/__tests__/e2e/hydration-strat-idle.html index 23e3aa32a5..d2e71815ff 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-idle.html +++ b/packages/vue/__tests__/e2e/hydration-strat-idle.html @@ -28,6 +28,7 @@ loader: () => new Promise(resolve => { setTimeout(() => { + debugger console.log('resolve') resolve(Comp) requestIdleCallback(() => {