Vue3-Suspense组件

Suspense

试验性

Suspense 是一个试验性的新特性，其API可能随时会发生变动。特此声明，以便社区能够为当前的实现提供反馈。

生产环境请勿使用。

以上是官方的警告！

• 等待异步组件渲染一些额外的内容，让应用有更好的用户体验
• <suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。
• 这里就是之前说到setup的时候提到的，setup的返回值不能使用异步，但是如果像下面这样使用异步函数引入子组件，那么子组件就可以使用异步了，像Promise。

<template>
    <div>
        <Suspense>
            // 这两个插槽名称是固定的
            // defalut:这里面写的就是我们正常要显示的组件和代码
            // fallback:这里写的就是应急代码，就是正常代码没有显示的时候的代码
            <template v-slot:defalut:>
                <Child/>
            </template>
            <template v-slot:fallback>
                <div>加载中...</div>
            </template>
        </Suspense>
    </div>
</template>
    
<script>
    // import Child from './component/Child.vue' // 平时使用的静态引入
    
    // 下面这是异步引入
    import { defineAsyncComponent } from 'vue'
    const Child = defineAsyncComponent(()=> import('./component/Child.vue'))
    export default {
        name: 'app',
        components: {
            Child
        }
        setup() {
            
        }
    }
</script>