1. 什么是异步组件，为什么要用它
- 需要延迟渲染的组件
- 应用中应将代码分成更小的块，当需要时才加载
- 应用场景如：首屏优化，路由懒加载
2. 怎么使用
- 使用
defineAsyncComponent - 传递一个返回
Promise的加载函数，在resolve定义获取到的组件，在inject表明错误 - 对于组件，可以使用
import来导入，因为import也会返回一个Promise
//写法1
const AsyncPage = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
let Page = import("./Page.vue");
resolve(Page);
});
});
//写法2
const AsyncPage = defineAsyncComponent(() => import("./Page.vue"));
异步加载举例
``` js
//定义延迟执行函数
function delayFn(delay, callback = () => {}) {
return new Promise((resolve, reject) => {
setTimeout(() => {
callback();
resolve();
}, delay);
});
}
const AsyncPage = defineAsyncComponent(async () => {
return new Promise(async (resolve, reject) => {
try {
await delayFn(5000);
const Page = await import("./Page.vue");
resolve(import("./Page.vue"));
} catch (error) {
reject(error);
}
});
});
```
3. 异步组件的加载，和错误状态
defineAsyncComponent传参为指定的选项对象
- loder 目标组件
- loadingComponent 加载中组件
- errorComponent 出错时组件展示
- timeout 超时设定 默认为infinity
- delay 延时多少秒才展示加载中组件
//加载中，错误状态定义
import loadingComponent from "./loading.vue";//静态引入
import errorComponent from "./error.vue";
const AsyncPage = defineAsyncComponent({
loader: () => import("./Page.vue"), //目标组件
//注意不要动态引入加载中或者错误中的组件 () => import("./loading.vue") 使用import 引入其实就是异步引入
loadingComponent, //加载中组件
errorComponent, //错误组件
timeout: 3000, //3s秒没有展示即报错,默认值为Infinity。报错并且展示错误组件
delay: 1000, //延迟1s才展示加载中组件loadingComponent
});
4. 全局的异步组件
- 和注册全局组件一样，也可以注册全局组件
app.component('AsyncPage',defineAsyncComponent(()=>import('@/views/UiAsyncComponent/Page.vue')))
5. 配合内置Suspense组件使用，优雅处理异步异常。
-
加载状态由
<Suspense>控制，在其下层的异步组件原先设，错误，超时，延时状态会被忽略。要是想让某个异步组件保持自己的异步状态可以在定义异步组件时配置suspensile:false
