今天就跟大家聊聊有关Vue.js 3.0 中Suspense组件的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
Suspense组件到底是什么?
Suspense组件用于在等待某个异步组件解析时显示后备内容。
你可能会想我们会在什么时候使用异步组件?
老实说,超出你的想象。每当我们希望组件等待数据获取时(通常在异步API调用中),我们都可以使用Vue3 Composition API制作异步组件。
以下是异步组件有用的一些实例:
在页面加载之前显示加载动画
显示占位符内容
处理延迟加载的图像
以前,在Vue2中,我们必须使用条件(例如 v-if 或 v-else)来检查我们的数据是否已加载并显示后备内容。
但是现在,Suspense随Vue3内置了,因此我们不必担心跟踪何时加载数据并呈现相应的内容。
好吧...那我们如何实现Suspense
在这个例子中,我们有一个异步的 ArticleInfo.vue 组件。由于本文的重点是Suspense,而不是Composition API,因此,不会对这些细节进行疯狂的详细介绍。如果您对更完整的Composition API教程感兴趣,请参阅此处。
简而言之,只需知道 setup 方法可以像其他方法一样被设置为异步的。
对于我们的示例,ArticleInfo将具有异步 setup 方法,该方法将在返回之前加载用户数据。
async function getArticleInfo() { // 一些异步API调用 return { article } }export default { async setup () { var { article } = await getArticleInfo() return { article } }}
然后,假设我们有一个 ArticlePost.vue 组件,其中包含我们的ArticleInfo组件。
如果我们要在等待组件获取数据并解析时显示“正在拼了命的加载…”之类的内容,则只需三个步骤即可实现Suspense。
将异步组件包装在<template #default>标记中
在我们的Async组件的旁边添加一个兄弟姐妹,标签为<template #fallback>。
将两个组件都包装在<suspense>组件中
使用插槽,Suspense将渲染后备内容,直到默认内容准备就绪。然后,它将自动切换以显示我们的异步组件。
看起来会像这样。
<Suspense> <template #default> <article-info/> </template> <template #fallback> <div>正在拼了命的加载…</div> </template> </Suspense>
你还可以捕获组件错误
Vue的另一个很酷的功能,尤其是当我们开始使用异步组件时,可以捕获错误并向用户显示一些错误消息。
即使在Vue2中,也可以使用 errorCaptured 钩子函数实现,但是在Vue3中,它已重命名为 onErrorCaptured。
无论调用什么,此钩子函数都会在捕获到任何后代组件的错误时运行。如果出现问题,我们可以将其与Suspense一起使用以渲染错误。
如果我们处理了一个错误以显示错误消息,则上面的组件将是这样。
<template> <div v-if="errMsg"> {{ errMsg }} </div> <Suspense v-else> <template #default> <article-info/> </template> <template #fallback> <div>正在拼了命的加载…</div> </template> </Suspense> </template> <script> import { onErrorCaptured } from 'vue' setup () { const errMsg = ref(null) onErrorCaptured(e => { errMsg.value = '呃,出了点问题!' return true })} return { error } </script>
看完上述内容,你们对Vue.js 3.0 中Suspense组件的作用是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。