Vue 3 异步组件的重新“定义”

首先我们来看一下有关于异步组件的变化：

• 新增了一个方法：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 关于异步组件的改变，对Vue感兴趣的同学可以看一下教程

Vue 1教程：https://www.w3cschool.cn/vuejs/

Vue 2教程：https://www.w3cschool.cn/vuejs2/

Vue 2.x 微课：https://www.w3cschool.cn/minicourse/play/vuecourse

文章参考来源：www.toutiao.com/a6853814142684365320/