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) => {
      /* ... */
    });
  }
);

原创文章,作者:admin,如若转载,请注明出处:https://www.laofox.com/web/vue-tutorial/113.html

(0)
上一篇 2022年6月19日 下午9:41
下一篇 2022年6月19日 下午9:39

相关推荐

  • 学习Vue3.0,你需要先了解一下Proxy

    据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投入到项目中的时候才去学习,提前学习,让你更快一步掌...

    vue.js 2022年6月19日
    8600
  • Vue组件间的8种通讯方式

    前言 Vue 提供了各种各样的通讯,其中包括兄弟间的通讯和非兄弟间的通讯,借此机会做个总结,查阅起来方便。   1、props   目录结构   co...

    2022年6月19日
    12800
  • Vue 中插槽是怎么发出数据的

    在工作中BUG的出现是在所难免的,但是在写代码的时候没法实时发现BUG,等事后再去解决BUG,还得花很多时间去进行log调试,这里给大家推荐一个不错的BUG监控工具:Fundebu...

    vue.js 2022年6月19日
    8000

发表评论

您的电子邮箱地址不会被公开。