VUE3.0 suspense组件

suspense渲染一些后备内容，可以让我们创建一个平滑的用户体验

1.1定义组件

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

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

1.2 使用suspense组件渲染效果

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

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

2.1定义异步组件

2.2 使用suspense组件渲染

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

作者：MaJiT
链接：https://www.jianshu.com/p/8040407904ee
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。