vue 3.0 suspense组件

1.定义组件

<template>
    <h1>{{result}}</h1>
</template>

<script>
    export default {
        name: "NewModel",
        setup(){
            return new Promise((resolve)=>{
                setTimeout(()=>{
                    return resolve({result:"OK"})
                },3000)
            })
        }
    }
</script>

2.使用suspense渲染效果

 <suspense>
                <template #default>
                    <new-model></new-model>
                </template>
                <template #fallback>
                    <h1>Loadding...</h1>
                </template>
            </suspense>

结果三秒之前显示Loadding... ,三秒之后显示组件内容；（成功后显示组件内容）

3.定义异步组件

 

 4.使用suspense渲染

  <suspense>
                <template #default>
                    <new-model></new-model>
                </template>
                <template #fallback>
                    <h1>Loadding...</h1>
                </template>
            </suspense>