Vue.js 3.0的Suspense组件简介

Vedu • 2020-10-20 07:05 • 资源分享 • 阅读 2602

Suspense组件是Vue3中的知名功能之一。

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。

值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入!

本文内容：

什么是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。

将异步组件包装在标记中
在我们的Async组件的旁边添加一个兄弟姐妹，标签为。
将两个组件都包装在组件中

使用插槽，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>

结束

Suspense只是Vue使开发人员更容易解决常见问题的另一种方式。不必有条件地渲染组件，我们只需使用Suspense来为我们处理事情。

我认为，这是Vue3中最简洁的功能之一。

现在，你应该对Vue中的Suspense组件有了更多的了解，并且已经想到了一些很酷的方法来开始将它们实现到你的项目中！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/12767.html

Vue.js 3.0的Suspense组件简介

Suspense组件到底是什么？

好吧…那我们如何实现Suspense

你还可以捕获组件错误

结束

相关推荐

发表评论