Vue3的异步组件使用

通过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>