Vue3 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>

fallback是加载等待时显示的组件，而default是加载成功后显示的组件。并且这两个不可改名，为定义好的slot具名插槽。

补充: 使用Suspense能缓解首页加载时间，原因是在使用异步组件进行打包时会分开，不用则打成一个js文件。