Vue3异步组件Suspense的使用方法详解

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus>（组件有异步的 setup()）
   └─ <Content>
      ├─ <ActivityFeed> （异步组件）
      └─ <Stats>（异步组件）

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

<template>
  <div class="home">
    <h3>我是Home组件</h3>
    <Suspense>
       <template #default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>Loading...</h3>
      </template>
    </Suspense>
  </div>
</template>
 
<script >
// import Child from './components/Child'//静态引入
import { defineAsyncComponent  } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {
  name: "",
  components: { Child },
};
</script>
 
<style>
.home {
  width: 300px;
  background-color: gray;
  padding: 10px;
}
</style>

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    name: {{user.name}}
    age: {{user.age}}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Child",
  async setup() {
    const NanUser = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: "NanChen",
            age: 20,
          });
        },2000);
      });
    };
    const user = await NanUser();
    return {
      user,
    };
  },
};
</script>

<style>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>