【vue】vue3如何捕获组件加载完成defineAsyncComponent和suspense的妙用

在Vue 3中，可以使用defineAsyncComponent结合<Suspense>组件来捕获和处理异步组件的加载过程。

以下是一个简单的例子：

<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <!-- 加载中的占位内容 -->
      <div>加载中...</div>
    </template>
  </Suspense>
</template>
 
<script>
import { defineAsyncComponent } from 'vue';
 
export default {
  components: {
    AsyncComp: defineAsyncComponent({
      // 异步加载的组件
      loader: () => import('./MyAsyncComponent.vue'),
      // 加载时的占位符
      loadingComponent: LoadingComponent,
      // 加载失败时的处理
      errorComponent: ErrorComponent,
      // 定义加载时间限制，超时则显示error组件
      delay: 2000,
      // 定义超时时的处理
      timeout: 3000,
    })
  }
}
</script>

在这个例子中，AsyncComp是一个异步加载的组件，它会在<Suspense>的#default插槽中显示。如果组件正在加载中，<Suspense>的#fallback插槽会显示一个占位符。通过defineAsyncComponent的选项，你可以定义加载中、加载失败以及超时的处理方式。