App下載

Vue 3 異步組件的重新“定義”

猿友 2020-07-29 16:12:54 瀏覽數(shù) (4076)
反饋

首先我們來看一下有關(guān)于異步組件的變化:

  • 新增了一個方法:defineAsyncComponent,用來顯式地定義異步組件

  • component 選項改名:loader

  • Loader 函數(shù)不再接受 resolvereject 作為參數(shù),并且必須返回一個 Promise

曾經(jīng)的異步組件

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 中函數(shù)式組件均有普通函數(shù)來定義,所以異步組件需要通過 defineAsyncComponent 來進(jìn)行顯式地定義。

import { defineAsyncComponent } from 'vue'; import { ErrorComponent, LoadingComponent } from 'xxx';


// 常規(guī)用法
const asyncPage = defineAsyncComponent(() => import('./HugePageComponent'));


// 高級用法
const asyncPageWithOptions = defineAsyncComponent({
  // 這里之前是 component,現(xiàn)在改叫 loader 了 
  loader: () => import('./HugePageComponent'),
  delay: 1000,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent,
});

另外,和 Vue 2.x 不同的是,loader 函數(shù)不再提供 resolvereject 作為默認(rèn)參數(shù)了,而且必須返回一個 Promise

// 2.x 版本 const oldAsyncComponent = (resolve, reject) => { / ... / }


// 3.x 版本
const newAsyncComponent = defineAsyncComponent(
 () => {
    return new Promise((resolve, reject) => {
      /* ... */
    });
  }
);

以上就是Vue 3 關(guān)于異步組件的改變,對Vue感興趣的同學(xué)可以看一下教程

Vue 1教程:http://m.hgci.cn/vuejs/

Vue 2教程:http://m.hgci.cn/vuejs2/

Vue 2.x 微課:http://m.hgci.cn/minicourse/play/vuecourse

文章參考來源:www.toutiao.com/a6853814142684365320/

1 人點贊