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

作者:? 时间:2024-04-29 13:09:08 

前言

当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载;这样的做得目的可以很好的提高用户体验。

为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习。

传递工厂函数作为参数

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

我们这里以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>组件修改为异步组件,示例代码如下:

<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'

// 简单用法
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>

代码运行结果如下所示:

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

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

传递对象类型作为参数

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

  • loader:同工厂函数;

  • loadingComponent:加载异步组件时展示的组件;

  • errorComponent:加载组件失败时展示的组件;

  • delay:显示loadingComponent之前的延迟时间,单位毫秒,默认200毫秒;

  • timeout:如果提供了timeout,并且加载组件的时间超过了设定值,将显示错误组件,默认值为Infinity(单位毫秒);

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

  • onError:一个函数,该函数包含4个参数,分别是errorretryfailattempts,这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>

上面的代码中,我们加载组件时前两次会请求错误,只有第三次加载才会成功,代码运行结果如下:

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

如果加载失败则会展示ErrorComponent组件。

来源:https://juejin.cn/post/7063111569055907877

标签:Vue3,异步,组件,defineAsyncComponent,API
0
投稿

猜你喜欢

  • Python的Bottle框架中返回静态文件和JSON对象的方法

    2023-11-07 20:14:41
  • 浅谈MySQL中的group by

    2024-01-18 22:53:54
  • Python图像处理库crop()函数 thumbnail方法使用详解

    2022-12-26 05:57:46
  • 全面分析MySQL ERROR 1045出现的原因及解决

    2024-01-19 08:55:41
  • python实现大量图片重命名

    2023-12-26 07:20:56
  • python实战小游戏之考验记忆力

    2023-02-23 14:29:54
  • Python利用Scrapy框架爬取豆瓣电影示例

    2022-04-30 15:16:17
  • 通过pycharm使用git的步骤(图文详解)

    2023-07-24 14:43:21
  • python判断文件是否存在,不存在就创建一个的实例

    2022-04-29 02:28:55
  • PHP APC缓存配置、使用详解

    2023-11-21 22:15:15
  • 从语义开始–概念、意义、实践

    2010-06-13 18:06:00
  • MySQL中使用or、in与union all在查询命令下的效率对比

    2024-01-16 02:28:45
  • 牛刀小试YUI compressor(YUI安装方法)

    2009-02-12 16:18:00
  • 分享一个可以生成各种进制格式IP的小工具实例代码

    2022-02-19 05:22:37
  • python实现最大优先队列

    2022-12-24 00:48:13
  • 高效使用Python字典的清单

    2022-05-29 09:53:35
  • python实现固定尺寸图像拼接

    2021-12-16 20:27:01
  • MySQL UNION操作符基础知识点

    2024-01-21 10:24:31
  • 使用PyCharm创建Django项目及基本配置详解

    2021-03-31 10:51:36
  • python实现字符串和字典的转换

    2023-03-02 02:57:18
  • asp之家 网络编程 m.aspxhome.com