今天小编给大家分享一下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异步组件有什么变化”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
