VUE3.0 suspense组件

作者: MaJiT | 来源:发表于2021-02-11 13:00 被阅读0次

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>