Appearance
Vue 中实现异步组件
如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那么 Vue 中给我们提供了一个函数：defineAsyncComponent。
defineAsyncComponent
- 接受两种类型的参数：
- 类型一：工厂函数，该工厂函数需要返回一个 Promise 对象；
- 类型二：接受一个对象类型，对异步函数进行配置；
工厂函数类型一的写法
javascript
import { defineAsyncComponent } from'vue'；
const AsyncHome = defineAsyncComponent(() import(". /AsyncHome.vue")）；
export default {
components: {
AsyncHome
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
工厂函数类型二的写法
javascript
const AsyncHome = defineAsyncComponent({
// 工厂函数
Loader:() =>import (". /AsyncHome.vue"),
// 加载过程中显示的组件
LoadingComponent: Loading,
// 加载失败时显示的组件
errorComponent: Error,
// 在显示 LoadingComponent之前的延迟|默认值：200 （单位ms）
delay: 2000,
// 如果提供了．timeout 并且加载组件的时间超过了设定值，将显示错误组件
// 默认值：Infinity（即永不超时，单位 ms)
// timeout:0,
// 定义组件是否可挂起 默认值：true
suspensible: true
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Suspense
注意：目前（2021-06-08）Suspense 显示的是一个实验性的特性，API 随时可能会修改。
- default：如果 default 可以显示，那么显示 default 的内容；
- fallback：如果 default 无法显示，那么会显示 fallback 插槽的内容；
html
<suspense>
<template #default>
<async-home></async-home>
</template>
<template #fallback>
<loading/>
</template>
</suspense>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8