通过Suspense我们可以方便的实现异步请求，加载前和加载后的效果
通常我们都要一个需求，当组件中的数据还在请求时，展示loading效果，当请求完毕时在展示正常的数据 之前这部分逻辑要我们自己定义，现在可以使用Suspense
如下
首先我们要给异步加载数据的组件的setup函数返回一个promise
代码语言：javascript复制<template>
<div class="hello">
{{number}}
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
setup(){
return new Promise(res=>{
setTimeout(()=>{
res({
number:23232
})
},1000)
})
}
});
</script>在App.vue中使用 Suspense
代码语言：javascript复制<template>
<div id="app">
<Suspense>
<template #default>
<hello />
</template>
<template #fallback>
<h1>加载中</h1>
</template>
</Suspense>
<img alt="Vue logo" src="./assets/logo.png">
<h1>X:{{x}}</h1>
<h2>Y:{{y}}</h2>
</div>
</template>default为数据加载完毕展示的组件
fallback为数据加载时展示的组件
如果 default中有多个组件，则会等待所有组件数据都加载完毕时才展示default里面的组件。
Suspense抓取错误
在App.vue
代码语言：javascript复制setup(){
const error = ref(null)
onErrorCaptured((e: any)=>{
error.value = e
return true //错误向上传播
})
return{
error
}
}
