Vue3中的异步组件defineAsyncComponentAPI怎么使用
导读：本文共2611字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 传递工厂函数作为参数defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：<template><logo-img/><... ...
目录
(为您整理了一些要点),点击可以直达。
defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。
我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：
现在我们就将<hello-world>组件修改为异步组件，示例代码如下：
我们这里为了看到效果，将import延迟执行，示例代码如下：
当2s后才会加载<hello-world>组件。
defineAsyncComponent方法也可以接收一个对象作为参数，该对象中有如下几个参数：
loader：同工厂函数；
loadingComponent：加载异步组件时展示的组件；
errorComponent：加载组件失败时展示的组件；
delay：显示loadingComponent之前的延迟时间，单位毫秒，默认200毫秒；
timeout：如果提供了timeout，并且加载组件的时间超过了设定值，将显示错误组件，默认值为Infinity（单位毫秒）；
suspensible：异步组件可以退出<Suspense>控制，并始终控制自己的加载状态。
onError：一个函数，该函数包含4个参数，分别是error、retry、fail和attempts，这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。
如下代码展示defineAsyncComponent方法的对象类型参数的用法：
上面的代码中，我们加载组件时前两次会请求错误，只有第三次加载才会成功，如果加载失败则会展示ErrorComponent组件。
Vue3中的异步组件defineAsyncComponentAPI怎么使用的详细内容，希望对您有所帮助，信息来源于网络。