vue3+ts异步加载子组件

在Vue 3中，可以使用<Suspense>组件来实现异步加载子组件。下面是一个示例：

<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <LoadingComponent />
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent, Suspense } from 'vue';

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Foo.vue'),
  loadingComponent: LoadingComponent,
  delay: 200,
  errorComponent: ErrorComponent,
  timeout: 3000
});

export default {
  components: {
    AsyncComp,
    LoadingComponent,
    ErrorComponent
  }
};
</script>

在上面的示例中，我们使用了<Suspense>组件来包裹异步加载的子组件<AsyncComp>。当异步组件正在加载时，将会显示<LoadingComponent>组件，加载完成后将会渲染<AsyncComp>组件。