Vue3之Suspense

本文主要是介绍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>

这篇关于Vue3之Suspense的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---