Suspense

Vue 查看英文原文 ↗

注意：Vue Query 的 Suspense 模式是实验性的，与数据获取本身的 Suspense 模式相同。除非你将 Vue 和 Vue Query 版本都锁定为彼此兼容的补丁级别，否则这些 API 有可能被更改，因此不推荐在生产中使用。

Vue Query 也可以与 Vue 的新 Suspense API 一起使用。要启用此模式，将需要启动 suspense 模式的组件包裹在 Vue 提供的Suspense组件中。

HTML

1<script setup>2import SuspendableComponent from "./SuspendableComponent.vue";3</script>4 5<template>6  <Suspense>7    <template #default>8      <SuspendableComponent />9    </template>10    <template #fallback>11      <div>Loading...</div>12    </template>13  </Suspense>14</template>

如果将SuspendableComponent组件中的setup函数改为async，则可以使用vue-query提供的异步suspense函数：

HTML

1<script>2import { defineComponent } from 'vue'3import { useQuery } from '@tanstack/vue-query'45const todoFetcher = async () =>6  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>7    response.json(),8  )9export default defineComponent({10  name: 'SuspendableComponent',11  async setup() {12    const { data, suspense } = useQuery(['todos'], todoFetcher)13    await suspense()1415    return { data }16  },17})18</script>

渲染时获取 vs 按需渲染

Suspense 模式下的 Vue Query 作为一种不需要额外配置的、渲染时获取的解决方案工作得非常好。这意味着，当你的组件尝试挂载时，它们将触发查询获取和 suspend，但仅在你导入并挂载它们之后。如果你想更进一步，实现“按需渲染”模型，我们建议在路由回调和/或用户交互事件上实现预取数据，以便在挂载之前即开始加载查询。甚至可以是在开始导入或挂载它们的父组件之前。