--- theme: fancy highlight: atom-one-dark --- > 大家好，我是[一碗周](https://juejin.cn/user/3350967174838701/posts)，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~ ## 写在前面当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。为了实现这个功能，Vue3中为我们提供了一个方法，即`defineAsyncComponent`，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。 ## 传递工厂函数作为参数 `defineAsyncComponent`方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个`Promise`，`Promise`的`resolve`应该返回一个组件。我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下： ```html ``` 现在我们就将``组件修改为异步组件，示例代码如下： ```html ``` 我们这里为了看到效果，将`import`延迟执行，示例代码如下： ```html ``` 代码运行结果如下所示： ![异步组件的基础展示.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ff713efcd134ca5854a65f077e8ce0f~tplv-k3u1fbpfcp-watermark.image?) 当2s后才会加载``组件。 ## 传递对象类型作为参数 `defineAsyncComponent`方法也可以接收一个对象作为参数，该对象中有如下几个参数： - `loader`：同工厂函数； - `loadingComponent`：加载异步组件时展示的组件； - `errorComponent`：加载组件失败时展示的组件； - `delay`：显示`loadingComponent`之前的延迟时间，单位毫秒，默认200毫秒； - `timeout`：如果提供了`timeout`，并且加载组件的时间超过了设定值，将显示错误组件，默认值为`Infinity`（单位毫秒）； - `suspensible`：异步组件可以退出``控制，并始终控制自己的加载状态。具体可以参考[文档](https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E4%B8%8E-suspense-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8)； - `onError`：一个函数，该函数包含4个参数，分别是`error`、`retry`、`fail`和`attempts`，这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。如下代码展示`defineAsyncComponent`方法的对象类型参数的用法： ```html ``` 上面的代码中，我们加载组件时前两次会请求错误，只有第三次加载才会成功，代码运行结果如下： ![对象参数demo.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7c4025c8ba54c96a70f823820d60692~tplv-k3u1fbpfcp-watermark.image?) 如果加载失败则会展示`ErrorComponent`组件。 ## 写在最后以上就是Vue3中的异步组件的全部内容，其实总的来说就是介绍了`defineAsyncComponent`API的一个用法。