官方文档

异步组件 | Vue3中文文档
动态组件 & 异步组件 | Vue3中文文档

使用方法一：<Suspense></Suspense>与插槽配合

1. 写一个异步组件

defineComponent 包裹要导出的实例对象能获取到更多提示。

1.1 setup 中返回一个 Promise 对象

/src/components/Async.vue

<template>
  <h1>{{ result }}</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return new Promise(resolve => {
      setTimeout(() => {
        return resolve({ result: "HI~Async" });
      }, 3000);
    });
  }
});
</script>

1.2 setup 中使用 async/await 代替返回 Promise（更推荐）

/src/components/Async.vue

<template>
  <h1>{{ result }}</h1>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  async setup() {
    const result = ref("");
    await setTimeout(() => {
      result.value = "HI~Async";
    }, 3000);

    return {
      result
    };
  }
});
</script>

2. 在 App.vue 中使用异步组件

注意：

• 使用 <Suspense></Suspense> 包裹所有异步组件相关代码
• <Suspense></Suspense> 下 <template #default></template> 插槽包裹异步组件
• <Suspense></Suspense> 下 <template #fallback></template> 插槽包裹渲染异步组件之前的内容

/src/App.vue

<template>
  <div id="app">
    <Suspense>
      <template #default>
        <Async></Async>
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

<script lang="ts">
// import { ref } from "vue";
import Async from "./components/Async.vue";

export default {
  name: "App",
  components: {
    Async
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3. 完成，效果如图所示