Vue3之Suspense

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

我们可以看到官网并不推荐我们使用它，目前仍处于测试中。

 

• 他用于加载异步组件的时候，当异步组件还未加载出来的时候优先显示一些内容，如骨架屏等
• 我们会发现它与react中的Suspense有着异曲同工之妙
• 在vue中我们使用是需要插槽语法的

react懒加载组件(如下)：

import { Component, lazy, Suspense } from "react";

const Childs = lazy(() => import("./Childs"));

export default class Parent extends Component {
  render() {
    return (
      <>
        <h2>我是父组件</h2>
        <Suspense fallback={<div>正在加载中....</div>}>
          <Childs />
        </Suspense>
      </>
    );
  }
}

vue3<Suspense>(如下)：

 

SuspenseView路由组件

<template>
    <h2>Suspense</h2>
    <Suspense>
        <template v-slot:default>
            <!-- 放异步组件 -->
            <AsyncComponent />
        </template>
        <template v-slot:fallback>
            <!-- 当异步组件还没有加载出来需要显示的内容 -->
            <div>正在加载中...</div>
        </template>
    </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from "vue"
// 引入异步组件
const AsyncComponent = defineAsyncComponent(() => import("../components/AsyncComponent.vue"))
</script>

<style lang="scss" scoped></style>

 AsyncComponent组件

<template>
    <div style="color: red;">
        {{ param }}
    </div>
</template>

<script setup>
const asyncFunc = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("各位好啊 异步组件闪亮登场(●ˇ∀ˇ●)")
        }, 1000)
    })
}

const param = await asyncFunc()
</script>

<style lang="scss" scoped>

</style>

suspense测试