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

[[426599]]

开门见山

依照惯例，首先从上帝视角看一下异步组件发生了什么改变：

• 新增了一个方法：defineAsyncComponent，用来显式地定义异步组件
• component 选项改名：loader
• Loader 函数不再接受 resolve 和 reject 作为参数，并且必须返回一个 Promise

[[426600]]

曾经的异步组件

在 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, 
} 

[[426601]]

即将到来的 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, 
}); 

[[426602]]

另外，和 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(目前还没有中文版)。

本文转载自微信公众号「劉凯里」，可以通过以下二维码关注。转载本文请联系劉凯里公众号。