笔记

suspense 悬念
英[səˈspens]
美[səˈspens]

视频内容

Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

  • 使用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>
    </template>

源码

App.vue

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

        <!-- 把-->
        <Suspense>
            <!-- 黄色插槽: 用于真正展示的Child组件 -->
            <template v-slot:default>
                <Child/>
            </template>

            <!-- 粉色插槽: 用于上面Child组件显示之前,临时显示的内容.-->
            <template v-slot:fallback>
                <h3>稍等，加载中...</h3>
            </template>
        </Suspense>
    </div>
</template>

<script>
    // import Child from './components/Child'//静态引入

    //动态引入 优点:外层可以在网速比较慢的时候,先展示出来。
    import {defineAsyncComponent} from 'vue' 
    //定义一个异步组件 此处的import 不再是关键词,而是一个函数.
    const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入
    export default {
        name:'App',
        components:{Child},
    }
</script>

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