通过defineAsyncComponent引入组件，使用Suspense渲染

Suspense有两个插槽，一个default一个fallback

<template><Suspense><template #default><userCard></userCard></template><template #fallback>加载中loading。。。</template></Suspense>
</template><script setup lang="ts">
import {defineAsyncComponent} from 'vue';
const userCard = defineAsyncComponent(()=>import('@/components/user.vue'))
</script>

子组件user.vue

<template><div><div>姓名：{{ data.name }}</div><div>年龄：{{ data.age }}</div><div>描述：{{ data.info }}</div></div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { axios } from '../server/axios';
interface Data {data: {name: string,age: number,info: string}
}
const { data } = reactive(await axios.get<Data>('./data.json'));
</script>