vue3_Suspense

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

src\App.vue

<template>
    <h2>App父级组件:Suspense组件的使用</h2>

    <Suspense>
        <template #default>
            <!-- 异步组件 -->
            <!-- <AsyncComponent /> -->
            <AsyncAddress />
        </template>
        <template v-slot:fallback>
            <!-- loading -->
            <h2>Loading</h2>
        </template>
    </Suspense>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'

import AsyncComponent from './components/AsyncComponent.vue'
import AsyncAddress from './components/AsyncAddress.vue'
export default defineComponent({
    components: {
        AsyncComponent,
        AsyncAddress,
    },
    name: 'App',
    setup() {
        return {}
    },
})
</script>

src\components\AsyncAddress.vue

<template>
    <h2>AsyncAddress组件</h2>
    <h3>{{data}}</h3>
</template>

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

export default defineComponent({
    name: 'AsyncAddress',
    // 方法一
    // setup() {
    //     return axios.get('/data/address.json').then((response) => {
    //         return {
    //             data: response.data,
    //         }
    //     })
    // },
    // 方法二
    async setup() {
        const result = await axios.get('/data/address.json')
        return { data: result.data }
    },
})
</script>

src\components\AsyncComponent.vue

<template>
    <h2>AsyncComponent子集组件</h2>
    <h3>{{msg}}</h3>
</template>

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

export default defineComponent({
    name: 'AsyncComponent',
    setup() {
        // 方法三
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    msg: 'do you love me',
                })
            }, 2000)
        })
    },
})
</script>