一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

3403771864 发布于2022-09-23 21:48 / 620人阅读

　　为了更好的提升用户的体验，我们要缩短加载的时间，要一些组件仅在需要的时候才加载这样极大的节约加载时间，提升用户访问效果。

　　现在我们可以用Vue3来作为一个实现方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。

　　传递工厂函数作为参数

　　defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

　　我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

　　<template>
　　<logo-img />
　　<hello-world msg="Welcome to Your Vue.js App" />
　　</template>
　　<script setup>
　　import LogoImg from './components/LogoImg.vue'
　　import HelloWorld from './components/HelloWorld.vue'
　　</script>

　　现在我们就将<hello-world>组件修改为异步组件，示例代码如下：

　　<logo-img />

　　<hello-world msg="Welcome to Your Vue.js App" />

　　</template>

　　import { defineAsyncComponent } from 'vue'

　　import LogoImg from './components/LogoImg.vue'

　　// 简单用法

　　const HelloWorld = defineAsyncComponent(() =>

　　import('./components/HelloWorld.vue'),

　　)

　　</script>

　　我们这里为了看到效果，将import延迟执行，示例代码如下：

　<script setup>
　　import { defineAsyncComponent } from 'vue'
　　import LogoImg from './components/LogoImg.vue'
　　// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
　　const time = (t, callback = () => {}) => {
　　return new Promise(resolve => {
　　setTimeout(() => {
　　callback()
　　resolve()
　　}, t)
　　})
　　}
　　// 定义异步组件，这里这样写是为了查看效果
　　const HelloWorld = defineAsyncComponent(() => {
　　return new Promise((resolve, reject) => {
　　;(async function () {
　　try {
　　await time(2000)
　　const res = await import('./components/HelloWorld.vue')
　　resolve(res)
　　} catch (error) {
　　reject(error)
　　}
　　})()
　　})
　　})
　　</script>

　　代码运行结果如下所示：

　　当2s后才会加载<hello-world>组件。

　　传递对象类型作为参数

　　defineAsyncComponent方法也可以接收一个对象作为参数，该对象中有如下几个参数：

　　loader：同工厂函数；

　　loadingComponent：加载异步组件时展示的组件；

　　errorComponent：加载组件失败时展示的组件；

　　delay：显示loadingComponent之前的延迟时间，单位毫秒，默认200毫秒；

　　timeout：如果提供了timeout，并且加载组件的时间超过了设定值，将显示错误组件，默认值为Infinity（单位毫秒）；

　　suspensible：异步组件可以退出<Suspense>控制，并始终控制自己的加载状态。

　　onError：一个函数，该函数包含4个参数，分别是error、retry、fail和attempts，这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。

　　如下代码展示defineAsyncComponent方法的对象类型参数的用法：

　　<template>
　　<logo-img />
　　<hello-world msg="Welcome to Your Vue.js App" />
　　</template>
　　<script setup>
　　import { defineAsyncComponent } from 'vue'
　　import LogoImg from './components/LogoImg.vue'
　　import LoadingComponent from './components/loading.vue'
　　import ErrorComponent from './components/error.vue'
　　// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
　　const time = (t, callback = () => {}) => {
　　return new Promise(resolve => {
　　setTimeout(() => {
　　callback()
　　resolve()
　　}, t)
　　})
　　}
　　// 记录加载次数
　　let count = 0
　　const HelloWorld = defineAsyncComponent({
　　// 工厂函数
　　loader: () => {
　　return new Promise((resolve, reject) => {
　　;(async function () {
　　await time(300)
　　const res = await import('./components/HelloWorld.vue')
　　if (++count < 3) {
　　// 前两次加载手动设置加载失败
　　reject(res)
　　} else {
　　// 大于3次成功
　　resolve(res)
　　}
　　})()
　　})
　　},
　　loadingComponent: LoadingComponent,
　　errorComponent: ErrorComponent,
　　delay: 0,
　　timeout: 1000,
　　suspensible: false,
　　onError(error, retry, fail, attempts) {
　　// 注意，retry/fail 就像 promise 的 resolve/reject 一样：
　　// 必须调用其中一个才能继续错误处理。
　　if (attempts < 3) {
　　// 请求发生错误时重试，最多可尝试 3 次
　　console.log(attempts)
　　retry()
　　} else {
　　fail()
　　}
　　},
　　})
　　</script>

　　上面的代码中，主要表达加载组件时前两次会请求错误，只有第三次加载才会成功，代码运行结果如下：

　　其实上面展示的是当如果失败会展示ErrorComponent组件。

　　相关文章希望大家以后多多支持！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127823.html

深入Vue3+TypeScript技术栈-coderwhy大神新课王红元

摘要：是一个测试框架，在中配合断言库实现单元测试。脚本命名方式为组件名。单元测试默认测试目录下除了之外的所有文件，可在文件中修改。回收，一般在每个测试脚本测试完成后执行回收。等元素事件名称配置项触发和事件，既触发点击事件。百度网盘提取码：u6C4在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
预计今年发布的Vue3.0到底有什么不一样的地方？

摘要：模板语法的将保持不变。基于的观察者机制目前，的反应系统是使用的和。为了继续支持，将发布一个支持旧观察者机制和新版本的构建。 showImg(https://segmentfault.com/img/remote/1460000017862774?w=1898&h=796); 还有几个月距离vue2的首次发布就满3年了，而vue的作者尤雨溪也在去年年末发布了关于vue3.0的计划，如果不...

fnngj 2019-08-23 14:40 评论0 收藏0
预计今年发布的Vue3.0到底有什么不一样的地方？

摘要：模板语法的将保持不变。基于的观察者机制目前，的反应系统是使用的和。为了继续支持，将发布一个支持旧观察者机制和新版本的构建。 showImg(https://segmentfault.com/img/remote/1460000017862774?w=1898&h=796); 还有几个月距离vue2的首次发布就满3年了，而vue的作者尤雨溪也在去年年末发布了关于vue3.0的计划，如果不...

raoyi 2019-08-05 16:00 评论0 收藏0
J.U.C|一文搞懂AQS

摘要：接着线程过来通过方式获取锁，获取锁的过程就是通过操作变量将其值从变为。线程加锁成功后还有一步重要的操作，就是将设置成为自己。线程屁颠屁颠的就去等待区小憩一会去了。一、写在前面这篇文章，我们聊一聊Java并发中的核武器， AQS底层实现。不管是工作三四年、还是五六年的在工作或者面试中涉及到并发的是时候总是绕不过AQS这个词。首先，确实还有很多人连AQS是什么都不知道，甚至有的竟...

tommego 2019-08-16 16:50 评论0 收藏0
❤ CSDN榜一博主，半年文章汇总【答谢粉丝、文末送书4本】❤

? 作者主页：不吃西红柿 ? 简介：CSDN博客专家?、HDZ核心组成员?、C站周榜第一✌ 欢迎点赞、收藏、评论 ? 粉丝专属福利（包邮送书4本，书单里自己选）：简历模板、PPT模板、学习资料、面试题库。直接去文末领取目录 ? 西红柿-半年文章汇总 ? 【粉丝福利、三连送书】【送书活动介绍】【如何获得】：评论区留言点赞收藏，通过python random函数从评论区抽奖2人...

付永刚 2021-09-23 11:21 评论0 收藏0