在 Vue3 中，异步组件的加载可以通过以下几种方式实现：

1. 使用import()函数动态 import：Vue3 支持使用import()函数来动态地导入组件。在组件的定义中，可以使用import()函数来异步地加载组件的定义。

   const AsyncComponent = () => import("./AsyncComponent.vue");
   
   export default {
     components: {
       AsyncComponent,
     },
   };

   这样，当组件被访问到时，它会自动异步加载并渲染。

2. 使用defineAsyncComponent函数：Vue3 还提供了defineAsyncComponent函数来定义异步组件。这个函数接收一个工厂函数或者返回Promise的函数作为参数，用来延迟组件的加载。

   import { defineAsyncComponent } from "vue";
   
   const AsyncComponent = defineAsyncComponent(() =>
     import("./AsyncComponent.vue")
   );
   
   const AsyncComponent1 = defineAsyncComponent({
     loader: () => import("./AsyncComponent.vue"),
     loadingComponent: () => <div>加载中...</div>,
     errorComponent: () => <div>加载失败</div>,
     delay: 300, // 设置延迟显示加载组件的时间
     timeout: 5000, // 设置加载超时的时间（毫秒）
   });
   
   export default {
     components: {
       AsyncComponent,
       AsyncComponent1,
     },
   };

   defineAsyncComponent函数可以更细粒度地控制组件的加载过程，并且还支持配置选项，如加载前的占位符、加载错误时的处理等。

3. 使用Suspense组件：Vue3 中引入了Suspense组件，它可以用来包裹异步加载的组件，并提供一个 fallback slot，在组件加载时显示一个占位符。

   <template>
     <Suspense>
       <template #default>
         <AsyncComponent />
       </template>
       <template #fallback> 加载中... </template>
     </Suspense>
   </template>

   当异步组件加载完成后，Suspense组件会自动替换占位符，并显示真正的组件。

需要注意的是，以上的异步组件加载方式在 Vue3 中已经发生了变化。与 Vue.js 2 相比，不再使用Vue.component来异步加载组件了。取而代之的是使用import()函数或defineAsyncComponent函数来实现异步组件的加载。并且，引入了Suspense组件作为异步组件加载时的占位符容器。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24