11、Suspense

• Suspense是Vue3推出的一个内置的特殊组件
• 如果使用Suspense，要返回一个Promise

Suspense 是 vue3 中新增的组件。自带两个 slot 分别为 default、fallback。顾名思义，当要加载的组件不满足状态时,Suspense 将回退到 fallback状态,一直到加载的组件满足条件，才会进行渲染。

一、使用场景

通常组件在正确呈现之前需要执行某种异步请求是很常见的， 例如，从一个 API 异步获取数据，并希望在数据渲染之前页面还是呈现一些效果，如 loading 效果。在Vue3中可以使用 suspense 组件很简单的实现这样的需求。

二、使用

2-1 定义异步组件

<template>
    <h1>{{result}}</h1>
</template>
<script>
export default {
    setup(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                return resolve({result:40})
            },3000)
        })
    }
}
</script>

2-2 Suspense

<template>
   <div>
     <Suspense>
        <template #default>
           <async-show/>
        </template>
        <template #fallback>
           <h1>Loading!...</h1>
        </template>
     </Suspense>
   </div>
</template>
<script>
import AsyncShow from './components/AsyncShow.vue';
export default {
  name: "App",
  components:{
    AsyncShow
  }
};
</script>