Vue3 – Suspense 异步渲染组件

简介

Suspense 是 Vue3 提供的一种新的组件渲染方式，Vue 的组件通常使用同步渲染方式，如果一个父组件中，包含了多个子组件，那及这个父组件要渲染完成，必须要把它所包含的所有子组件都渲染完成后，父组件才会被一并渲染到页面中。

但如果子组件的渲染非常慢，或者网络很慢加载子组件慢，那么就会导致整个页面显示非常慢。

Suspense 可以帮助当父组件已渲染完成之后，但子组件还没渲染完成时，可以异步显示父组件到页面中，等到子组件渲染完成后，再显示子组件这样一种异步显示功能。

Suspense 概念

Suspense 用到了异步渲染组件的方式，所以需要使用异步加载组件的配合。

在Vue3 中，提供了一种异步加载组件的API,可以实现异步加载组件，代码如下；

<template>
  <div>
    我是父组件
    <Suspense>
      <!-- 
      Suspense 本身是一个 Slot 插槽
      它包含了两段插槽
       default：可以用在当组件已加载完成后要显示的内容
       fallback：可以用在当组件还没有被加载完成时要显示的内容，用于提醒用户还有数据在加载中
       
       注意：如果子组件不是使用异步加载的话，Suspense 是无效的，因为它会同步加载
       -->
      <template v-slot:default>
        <Child></Child>
      </template>
      
      <template v-slot:fallback>
        正在加载中……
      </template>
      
    </Suspense>
  </div>
</template>

<script>

/**
 * 通过使用 Vue3 提供的 defineAsyncComponent 方法异步加载组件
 */
import {defineAsyncComponent} from "vue";
const Child = defineAsyncComponent(()=>import("@/components/Child"))
export default {
  name: 'App',
  components:{
    Child
  },
  setup() {
    return {
     
    }
  }
}