Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~
写在前面
当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。
为了实现这个功能，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>组件修改为异步组件，示例代码如下：
<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的一个用法。
