分享至
作者：kyrieliu来源：劉凯里
开门见山
依照惯例，首先从上帝视角看一下异步组件发生了什么改变：
- 新增了一个方法：defineAsyncComponent，用来显式地定义异步组件
- component 选项改名：loader
- Loader 函数不再接受 resolve 和 reject 作为参数，并且必须返回一个 Promise
曾经的异步组件
在 Vue 2.x 中，定义一个异步组件还是很方便的：
const asyncPage = () => import('./HugePageComponent.vue');
如果需要一些高级的用法(我赌五毛钱你不知道这个用法)：
import { ErrorComponent, LoadingComponent } from 'xxx';
const asyncPage = {
component: () => import('./HugePageComponent'),
delay: 1000,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent,
即将到来的 Vue 3 异步组件
因为在 Vue 3 中函数式组件均有普通函数来定义，所以异步组件需要通过 defineAsyncComponent 来进行显式地定义。
import { defineAsyncComponent } from 'vue';
import { ErrorComponent, LoadingComponent } from 'xxx';
// 常规用法
const asyncPage = defineAsyncComponent(() => import('./HugePageComponent'));
// 高级用法
const asyncPageWithOptions = defineAsyncComponent({
// 这里之前是 component，现在改叫 loader 了
loader: () => import('./HugePageComponent'),
delay: 1000,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent,
另外，和 Vue 2.x 不同的是，loader 函数不再提供 resolve 和 reject 作为默认参数了，而且必须返回一个 Promise：
// 2.x 版本
const oldAsyncComponent = (resolve, reject) => {
/* ... */
// 3.x 版本
const newAsyncComponent = defineAsyncComponent(
() => {
return new Promise((resolve, reject) => {
/* ... */
如果想更深了解 Vue 3 的异步组件，请移步：https://v3.vuejs.org/guide/migration/async-components.html#_3-x-syntax(目前还没有中文版)。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
