这篇文章主要讲解了“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怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。