Vue3学习：Suspense-新组件

最新推荐文章于 2024-04-08 01:15:00 发布

¡Venceremo

最新推荐文章于 2024-04-08 01:15:00 发布

阅读量123

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129668213

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

文章介绍了在Vue.js中如何使用Suspense组件来处理异步加载的组件，展示了静态引入和异步引入组件的区别，并通过示例解释了如何在组件中使用Promise配合Suspense进行数据加载时的用户体验优化，提供了加载中状态的fallback显示。

摘要由CSDN通过智能技术生成

Suspense：悬疑

首先需要知道异步组件

静态引入：

子组件

<template>
    <div class="child">
        <h3>我是Child组件</h3>
    </div>
</template>

<script>
  
    export default {
        name:'Child',
        setup(){
          
        }
    }
</script>

<style>
    .child{
        background-color: skyblue;
        padding: 10px;
    }
</style>

父组件——静态引入，全部完成才能出现

<template>
    <div class="app">
        <h3>我是App组件</h3>
         <Child/>
    </div>
</template>

<script>
 import Child from './components/Child'//静态引入    
    export default {
        name:'App',
        components:{Child},
    }
</script>

<style>
    .app{
        background-color: gray;
        padding: 10px;
    }
</style>

同时显示

使用异步引入,异步显示——可以根据先后顺序出现，但是用户可能怀疑没有数据，需要进行还没有数据的判断

<script>
    import {defineAsyncComponent} from 'vue' 
    const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
    export default {
        name:'App',
        components:{Child},
    }
</script>

使用Suspense包裹组件，并配置好default 与 fallback

<template>
    <div class="app">
        <h3>我是App组件</h3>
        
        <Suspense>
放置本应该展示的组件
            <template v-slot:default> 
                <Child/>
            </template>
消息没有回来的时候展示的信息
            <template v-slot:fallback>
                <h3>稍等，加载中...</h3>
            </template>
        </Suspense>
    </div>

使用了Suspense并且组件是异步引入，就可以使用Promise，作为返回值

<template>
    <div class="child">
        <h3>我是Child组件</h3>
        {{sum}}
    </div>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name:'Child',
         setup(){
            let sum = ref(0)
            let p = new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve({sum})
                },3000)
            })
            return  p
        }
    }
</script>

<style>
    .child{
        background-color: skyblue;
        padding: 10px;
    }
</style>

    import {ref} from 'vue'
    export default {
        name:'Child',
        async setup(){
            let sum = ref(0)
            let p = new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve({sum})
                },3000)
            })
//await 等待p成功的结果 配合async
            return await p
        }
    }

setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）