页面在等待网络请求时总是要展示些东西给用户，来提升用户体验。在Vue2中，我们可能会使用v-if或v-show来控制等待请求时页面等待内容的展示与隐藏。那么在Vue3 中，这种做法完全是多余的，Vue3 给我们提供了更方便快捷的用法—— Suspense 标签。
示例：
假设我们在App.vue中引入了CountTest.vue组件，在CountTest中有异步请求：

<template>
     <div>
         <span>姓名：{{name}}</span><br>
         <span>性别：{{gender}}</span>
         <button @click="changeInfo">修改信息</button>
     </div>
</template>

<script>
import {  reactive, toRefs } from 'vue';
export default {
    async setup(){
        let info = reactive({
            name:"N+",
            gender:1
        })
        let changeInfo = () => {
            info.name = "聂少"
        }
        let newObj = await new Promise((resolve,reject)=>{
            setTimeout(() => {
             resolve(toRefs(info))
            }, 3000);
        })
        return{
            ...newObj,changeInfo
        }
    }
}
</script>

那么在App.vue中，我么就可以使用 Suspense标签来处理这个异步等待：

<template>
  <Suspense>
    <template #default>
      <CountTest />
    </template>
    <template #fallback>
      <div>
        全速加载...
      </div>
    </template>
  </Suspense>
</template>

<script>
import CountTest from './components/CountTest.vue'
export default {
  name: 'App',
  components: {
    CountTest
  }
}
</script>