在 Vue 3 中，你可以使用异步组件来按需加载组件，这样可以提高应用的性能。以下是一个简单的例子，展示如何在 Vue 3 中异步加载组件。
假设你有一个需要异步加载的组件 AsyncComponent.vue。
1. 创建异步组件 AsyncComponent.vue
<template><div><h1>这是一个异步加载的组件</h1></div>
</template><script>
export default {name: 'AsyncComponent'
}
</script>
2. 在主组件中异步加载 AsyncComponent
<template><div id="app"><button @click="loadComponent">加载组件</button><Suspense><template #default><component :is="asyncComponent"></component></template><template #fallback><div>加载中...</div></template></Suspense></div>
</template><script>
import { defineAsyncComponent } from 'vue';export default {name: 'App',data() {return {asyncComponent: null};},methods: {loadComponent() {this.asyncComponent = defineAsyncComponent(() =>import('./components/AsyncComponent.vue'));}}
};
</script>
3. 使用 Suspense 组件进行异步加载状态管理
在上面的代码中，Suspense 组件提供了一种在异步加载组件时显示加载状态的方法。#default 插槽中放置的是异步加载的组件，#fallback 插槽中放置的是加载时显示的内容。
4. 项目结构
src/
├── components/
│ └── AsyncComponent.vue
└── App.vue
解释
-
defineAsyncComponent：这个 Vue 3 提供的函数用来定义异步组件。import('./components/AsyncComponent.vue')返回一个 promise，当组件被成功加载时，该 promise 被 resolved。 -
Suspense 组件：
Suspense组件可以包裹异步组件，并在异步组件加载期间显示#fallback插槽中的内容。
通过这种方式，可以按需加载 Vue 组件，从而提高应用的性能和用户体验。
