异步组件

基本用法

defineAsyncComponent 是 Vue3 提供的一个函数，用于动态加载组件。它常用于懒加载组件的场景，特别是在单页面应用中，动态加载组件可以提高页面初始加载的速度。

vue

<template>
  <AdminPage />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

加载与错误状态

异步操作不可避免地会涉及到加载和错误状态，因此 defineAsyncComponent() 也支持在高级选项中处理这些状态：

ts

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./components/AdminPageComponent.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})