Suspense

在Vue3中生命周期函数调用一步请求，组件的外部必须使用Suspense标签进行嵌套以等待异步方式的结束，可以进行页面加载展示。同事可以进行错误信息的页面处理

sus.vue
<template>
    <div id="app">
        <div v-if="error">{{error}}</div>
        <Suspense v-else>
            <template #default>
                <user/>
            </template>
           <template #fallback>
               Loading.....
            </template>
        </Suspense>
    </div>
</template>
<script>
import User from "./User"
import {ref,onErrorCaptured} from "vue"
export default {
    components:{
        'user':User
    },
    setup(){
        const error = ref(null)
        onErrorCaptured(e=>{
            error.value = e
            return true
        })
        return {error}
    }
}
</script>

user.vue

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <h1>{{ user.age }}</h1>
  </div>
</template>

<script>
export default {
  async setup() {
    const fetchUser = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
           resolve({ name: "Carlo", age: "20" });
         // reject("获取信息失败！");
        }, 3000);
      });
    };
    
    const user = await fetchUser();
    return { user };
  },
}
</script>

页面会先展现Loading ,3s之后会展示user.vue
如果把 resolve({ name: "Carlo", age: "20" }); 注释，reject("获取信息失败！");放开，则会展示错误信息