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

目录

• 前言
• 传递工厂函数作为参数
• 传递对象类型作为参数
• 总结

前言

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

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

传递工厂函数作为参数

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

我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

现在我们就将组件修改为异步组件，示例代码如下：

我们这里为了看到效果，将import延迟执行，示例代码如下：

代码运行结果如下所示：

当2s后才会加载组件。

传递对象类型作为参数

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

• loader：同工厂函数；
• loadingComponent：加载异步组件时展示的组件；
• errorComponent：加载组件失败时展示的组件；
• delay：显示loadingComponent之前的延迟时间，单位毫秒，默认200毫秒；
• timeout：如果提供了timeout，并且加载组件的时间超过了设定值，将显示错误组件，默认值为Infinity（单位毫秒）；
• suspensible：异步组件可以退出控制，并始终控制自己的加载状态。
• onError：一个函数，该函数包含4个参数，分别是error、retry、fail和attempts，这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。

如下代码展示defineAsyncComponent方法的对象类型参数的用法：

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

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

总结

到此这篇关于一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法的文章就介绍到这了,更多相关Vue3异步组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！