1.Suspense Suspense组件是Vue3中的新增功能之一。 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。 值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入!

注意：如果使用Suspense,需要返回一个Promise对象。

实例：

在public/data/目录里添加测试请求数据，user.json

{
    "uid":"54665776845333",
    "username":"admin",
    "type":"guest",
    "password":"123456"
}

AsyncComponent.vue

<template>
    <h2>这里是一个异步组件</h2>
    <p>{{userInfo}}</p>
</template>

<script>
    import axios from 'axios'
    import { defineComponent, ref } from "vue";
    export default {
        name: "AsyncComponent",
        async setup() {
            const userInfo = ref('');
            const result = await axios.get('/data/user.json')
            console.log(result.data);
            return {
                userInfo: result.data
            }
        }
    }
</script>

<style scoped>

</style>

App.vue

<template>
    <h2>Suspense演示案例</h2>
    <div>
        <Suspense>
            <template #default>
                <div>
                    <AsyncComponent/>
                </div>
            </template>
            <template #fallback>
                <h1>LOADING...</h1>
            </template>
        </Suspense>
    </div>
</template>

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

    //静态引入组件
    //import AsyncComponent from '@/components/AsyncComponent.vue'
    //注意：必须采用动态引入方式才可以显示Suspense的内容
    //动态引入组件
    const AsyncComponent = defineAsyncComponent(() => import('@/components/AsyncComponent.vue'))
    export default {
        name: 'App',
        components: {
            AsyncComponent
        },
        setup() {
            return {}
        }
    }

</script>
<style>
    #app {
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /*解决微信浏览器背景默认灰色问题*/
    body, html {
        background: #ffffff
    }
</style>