Vue 3新引入的Suspense组件介绍

Posted 2023-03-18

参考技术A Suspense是Vue 3新增的内置标签，尽管目前官方文档里并没有Suspense的介绍，但不妨碍我们先学习它。

每当我们希望组件等待数据获取时（通常在异步API调用中），我们都可以使用Vue3 Composition API制作异步组件。

以下是异步组件有用的一些实例：

以前，在Vue 2中，我们必须使用条件（例如 v-if 或 v-else）来检查我们的数据是否已加载并显示后备内容。

但是现在，Suspense随Vue3内置了，因此我们不必担心跟踪何时加载数据并呈现相应的内容。

我们通过范例学习Suspense，首先编写一个父组件。

<template>里使用了<Suspense>标签，即便你完全不懂<Suspense>的用法，看了范例也该看明白，default插槽里要放正式内容，fallback插槽里要放降级内容，我放了一行字 Loading ... ，你也可以放菊花图之类的东西。

变量名asyncCom必须与模板里的组件名一致。defineAsyncComponent方法用来动态引入组件。

页面会显示1.5秒的Loading...，然后显示一个列表。

Vue从上到下执行子组件的setup里的全部语句，执行完同步语句（包括await语句）之后，父组件就认为子组件加载完成，在这之前，子组件setup状态始终未pending，所以父组件显示降级内容（Loading...），等子组件setup的状态变成resolved或者rejected，父组件就显示默认内容。

先说怎么显示异常：我的计划是，如果出现异常，就不再显示Loading...，而是显示“Loading Error. Retry?”，其中Retry做成一个按钮。

现在 ref: jsonData = await fetchData(); 这句根本没有考虑异常情况，那么怎么捕获异常呢？

我们定义一个布尔值asyncComShow负责刷新组件，同时给<async-com>绑上事件@retry="retry"。retry函数要做的事情就是隐藏组件然后再显示，借此刷新组件。

首先编写错误提示，然后定义变量errorShow来切换提示。

const instance = getCurrentInstance();用于提供emit方法向父组件发出retry申请。也可以在顶层定义const context = useContext();，然后用context.emit("retry");，我建议用后者，因为标准且轻量级。

之后，我们用try...catch...来捕获错误。

最后，await getList()的await是必须要写的，不然setup生命期会在瞬间结束，Loading提示也只会显示一瞬间。