Vue3異步組件有什么變化

今天小編給大家分享一下Vue3異步組件有什么變化的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

首先我們來看一下有關于異步組件的變化：

• 新增了一個方法：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) => {
      /* ... */
    });
  }
);

以上就是“Vue3異步組件有什么變化”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。