今天小编给大家分享一下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
中函数式组件均有普通函数来定义,所以异步组件需要通过 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异步组件有什么变化”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。
--结束END--
本文标题: Vue3异步组件有什么变化
本文链接: https://www.lsjlt.com/news/309933.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0