vue3动态加载组件

// 使用 Vue 3 动态加载组件的示例代码

// 1. 使用 import() 函数动态导入组件
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

// 2. 在模板中使用动态组件
<template>
  <div>
    <!-- 动态加载的组件会在这个位置渲染 -->
    <Suspense>
      <template #default>
        <MyComponent />
      </template>
      <template #fallback>
        <!-- 加载中的占位符 -->
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>

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

export default {
  components: {
    // 注册动态加载的组件
    MyComponent
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

解释说明：

1. defineAsyncComponent：这是 Vue 3 提供的一个函数，用于定义一个异步组件。它接收一个返回 Promise 的函数，这个函数通常是一个动态导入（import()）。

2. Suspense：Vue 3 引入的新特性，用于处理异步依赖。它可以包裹异步组件，并提供一个 #fallback 插槽，在组件加载时显示占位内容。

3. 动态导入：通过 import('./MyComponent.vue') 动态加载组件，只有在组件真正需要渲染时才会进行加载，从而实现按需加载，优化性能。

4. Loading 状态：在 Suspense 中，#fallback 插槽用于指定组件加载时的占位内容，比如 "Loading..." 提示。