Vue 3 异步加载组件示例

在 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

解释

1. defineAsyncComponent：这个 Vue 3 提供的函数用来定义异步组件。import('./components/AsyncComponent.vue') 返回一个 promise，当组件被成功加载时，该 promise 被 resolved。

2. Suspense 组件：Suspense 组件可以包裹异步组件，并在异步组件加载期间显示 #fallback 插槽中的内容。

通过这种方式，可以按需加载 Vue 组件，从而提高应用的性能和用户体验。