Vue3中的异步组件defineAsyncComponentAPI怎么使用

这篇文章主要讲解了“Vue3中的异步组件defineAsyncComponentAPI怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3中的异步组件defineAsyncComponentAPI怎么使用”吧！

传递工厂函数作为参数

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>组件修改为异步组件，示例代码如下：

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

当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组件。

感谢各位的阅读，以上就是“Vue3中的异步组件defineAsyncComponentAPI怎么使用”的内容了，经过本文的学习后，相信大家对Vue3中的异步组件defineAsyncComponentAPI怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！