[[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(目前還沒有中文版)。

本文轉載自微信公眾號「劉凱里」，可以通過以下二維碼關注。轉載本文請聯系劉凱里公眾號。