vue3只有在使用时才加载组件

在 Vue3 中，可以使用 Suspense 组件来实现组件懒加载。Suspense 组件可以让我们在等待异步组件加载时呈现一个占位符，直到异步组件加载完成后再将其替换为组件本身。

下面是一个简单的例子：

<template>
  <div>
    <Suspense>
      <template #default>
        <async-component />
      </template>
      <template #fallback>
        <div>正在加载组件...</div>
      </template>
    </Suspense>
  </div>
</template>

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

const asyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: () => import('./AsyncComponentError.vue'),
  loadingComponent: () => import('./AsyncComponentLoading.vue')
})

export default {
  components: {
    asyncComponent
  }
}
</script>

在上面的例子中，我们使用了 Suspense 组件来包裹异步组件 async-component，并在模板内使用 #default 来呈现异步组件本身，使用 #fallback 来呈现占位符。在 defineAsyncComponent 中，我们可以配置一些选项，如异步加载的延迟时间、超时时间、错误组件和加载组件等。

当异步组件加载成功时，Suspense 组件会自动将占位符替换为异步组件本身。如果异步组件加载失败或超时，则会呈现错误组件或加载组件。

需要注意的是，Suspense 组件目前仍处于实验阶段，建议在生产环境中慎重使用。