vue3 懒加载
vue2 实现懒加载
components:{ 'child': ()=>import('./child.vue') }
|
而 vue3 实现懒加载需要借助 defineAsyncComponent
components:{
'child': defineAsyncComponent(()=>import('./child.vue'))
}
|
Vue3 引入defineAsyncComponent 辅助函数的原因
现在，在 Vue 3 中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的 defineAsyncComponent helper 中来显式定义。
更高级语法:
const AsyncComp = defineAsyncComponent({ // 工厂函数 loader: () =>
import('./Foo.vue'), // 加载异步组件时要使用的组件 loadingComponent:
LoadingComponent, // 加载失败时要使用的组件 errorComponent: ErrorComponent, //
在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms） delay: 200, //
如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件 //
默认值：Infinity（即永不超时，单位 ms） timeout: 3000, // 定义组件是否可挂起 |
默认值：true suspensible: false, /** * * @param {*} error 错误信息对象 * @param
{*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试 *
@param {*} fail 一个函数，指示加载程序结束退出 * @param {*} attempts
允许的最大重试次数 */ onError(error, retry, fail, attempts) { if
(error.message.match(/fetch/) && attempts <= 3) { //
请求发生错误时重试，最多可尝试 3 次 retry() } else { // 注意，retry/fail 就像
promise 的 resolve/reject 一样： // 必须调用其中一个才能继续错误处理。 fail() }
} })
|
魔法注释
在组件懒加载的箭头函数前加注释可以指定打包的名字,并且分开打包
https://juejin.cn/post/7016890750193369101#comment
异步组件
<template>
<div>
<!--`<suspense>` 组件有两个插槽。它们都只接收一个直接子节点。`default` 插槽里的节点会尽可能展示出来。如果不能，则展示 `fallback` 插槽里的节点。-->
<Suspense>
<template #default>
<!--这里的内容可能会带有异步请求或者产生异步任务-->
<AsyncChild />
</template>
<template #fallback>
<!--这里的内容会在#default内容加载的过程中进行渲染，并显示-->
<div>data Info Loading...</div>
</template>
</Suspense>
</div>
</template>
|
参考 vue3 官网 suspense
Suspense | Vue.js (vuejs.org)
Vue3 新特性 Teleport Suspense 实现原理 - 掘金 (juejin.cn)
事件
<Suspense> 组件会触发三个事件：pending、resolve 和 fallback。pending 事件是在进入挂起状态时触发。resolve 事件是在 default 插槽完成获取新内容时触发。fallback 事件则是在 fallback 插槽的内容显示时触发。
例如，可以使用这些事件在加载新组件时在之前的 DOM 最上层显示一个加载指示器。
tips:
- Vue Router 使用动态导入对懒加载组件进行了内置支持。这些与异步组件不同，目前他们不会触发
<Suspense>。但是，它们仍然可以有异步组件作为后代，这些组件可以照常触发 <Suspense>。
- 异步组件默认就是“suspensible”的。这意味着如果组件关系链上有一个
<Suspense>，那么这个异步组件就会被当作这个 <Suspense> 的一个异步依赖。在这种情况下，加载状态是由 <Suspense> 控制，而该组件自己的加载、报错、延时和超时等选项都将被忽略。
- 异步组件也可以通过在选项中指定
suspensible: false 表明不用 Suspense 控制，并让组件始终自己控制其加载状态。
