vue3 Suspense组件初识

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

cyydd21

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

阅读量178

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/cyydd21/article/details/129061591

版权

Suspense组件在Vue中用于处理异步组件，它允许在等待下层组件加载时显示fallback内容，如Loading...。通过defineAsyncComponent定义异步组件，然后在Suspense的default和fallback插槽中分别设置待加载组件和占位内容。当setup返回Promise时，必须异步导入组件。

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

Suspense组件是什么：用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

即suspense是用于渲染异步组件的，等待时显示Loading....

使用步骤：

一.defineAsyncComponent组合式API，用于定义异步组件

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

二. 插槽包裹异步组件，#default用于放置页面真正要显示的内容，#fallback用于在组件还没加载出来该模块时，显示其他内容。

    <suspense>
      <!-- default插槽v-slot里面放置异步组件 -->
      <template #default>
        <Per/>  <!--需要加载的组件 -->
      </template>
      <!-- fallback插槽里面放置组件没有加载完成时显示的内容 -->
      <template #fallback>
        Loading...
      </template>
    </suspense>

三.如果组件的setup返回的是一个promise对象，那么必须使用异步方式导入，否则该异步组件无法显示。

  setup() {
    let name = ref("小王");
    let age = ref(25);

    //setup方法的返回值，可以是一个Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve({
                name,
                age
            })
        }, 2000);
    })
  }