Vue.js3.0的Suspense组件介绍

Suspense组件是Vue3中众所周知的特性之一。它们允许我们的应用程序在等待异步组件时呈现一些后备内容，从而让我们能够创建流畅的用户体验。值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入！在本文中：什么是Suspense组件何时使用它如何使用Suspense组件Suspense组件究竟是什么？Suspense组件用于等待异步组件解析显示回退内容。您可能想知道我们什么时候要使用异步组件？老实说，比你想象的还要多。每当我们希望组件等待数据被获取时（通常在异步API调用中），我们可以使用Vue3CompositionAPI来制作异步组件。以下是异步组件有用的一些实例：在页面加载之前显示加载动画显示占位符内容处理延迟加载的图像以前，在Vue2中，我们必须使用v-if或v-else等条件来检查我们的数据是否正确加载并显示回退。但是现在，Suspense内置于Vue3中，因此我们不必担心跟踪数据何时加载并相应地呈现。好吧...那么我们如何实现Suspense在这个例子中我们有一个异步的ArticleInfo.vue组件。由于本文的重点是Suspense，而不是CompositionAPI，因此我不会深入讨论这些细节。如果您对更完整的CompositionAPI教程感兴趣，请参阅此处。简而言之，只需知道设置方法可以像任何其他方法一样异步。对于我们的示例，ArticleInfo将具有一个异步设置方法，该方法将在返回之前加载用户数据。asyncfunctiongetArticleInfo(){//一些异步API调用return{article}}exportdefault{asyncsetup(){var{article}=awaitgetArticleInfo()return{article}}}然后，假设我们有一个包含ArticleInfo组件的ArticlePost.vue组件.如果我们想在等待组件获取数据并解析它时显示类似“Desperatelyloading...”的内容，我们只需三步即可实现Suspense。将异步组件包装在标签中在我们的异步组件旁边添加一个带有标签的同级组件。使用插槽将两个组件包装在一个组件中，Suspense将呈现回退内容，直到默认内容准备就绪。然后它会自动切换到显示我们的异步组件。它看起来像这样。

还可以捕获组件Errors另Vue的一个很酷的功能，尤其是当我们开始使用异步组件时，它能够捕获错误并向用户显示一些错误消息。即使在Vue2中，也可以使用errorCaptured钩子函数来实现，但是在Vue3中，已经改名为onErrorCaptured。不管调用什么，这个钩子函数都会在捕获到任何后代组件的错误时运行。如果出现问题，我们可以将它与Suspense一起使用以呈现错误。如果我们处理错误以显示错误消息，这就是上述组件的样子。

是拼命加载...

EndSuspense只是Vue使开发人员更容易解决常见问题的另一种方式。不必有条件地渲染组件，我们可以只使用Suspense来为我们处理事情。在我看来，这是Vue3中最简洁的功能之一。到目前为止，您应该对Vue中的Suspense组件有了更多的了解，并且已经找到了一些很酷的方法来开始将它们实施到您的项目中！