译零 TransZero · TanStack Query 中文文档
主站

概述

更新于 2026-11-02 Vue 查看英文原文 ↗

TanStack Query(曾用名 Vue Query)常被描述为 Web 应用中缺失的数据拉取库;更准确地说,它让 Web 应用中的拉取、缓存、同步和更新服务端状态(server state) 变得轻而易举。

设计动机

大多数核心 Web 框架并未提供一种约定俗成的、整体性的数据拉取或更新方式。因此,开发者往往要么构建封装了严格数据拉取规范的元框架,要么自行发明一套数据拉取方法。这通常意味着将基于组件的状态与副作用拼凑在一起,或借助更通用的状态管理库在整个应用中存储和提供异步数据。

尽管大多数传统状态管理库在处理客户端状态(client state)方面表现出色,但它们在处理异步状态或服务端状态时却并不理想。这是因为服务端状态截然不同:首先,服务端状态具有如下特征:

  • 存储于远程位置,你可能无法控制或拥有该位置;
  • 需通过异步 API 进行拉取与更新;
  • 具有共享所有权属性,可能在你不知情的情况下被他人修改;
  • 若不加留意,你的应用中该状态就可能变得“过期”。

一旦你理解了应用中服务端状态的本质,后续还会面临更多挑战,例如:

  • 缓存……(编程中可能最难实现的功能之一)
  • 将多个针对相同数据的请求去重为单个请求
  • 在后台更新“过期”的数据
  • 判定数据何时“过期”
  • 尽快反映数据更新
  • 分页(paginated)与懒加载等性能优化手段
  • 服务端状态的内存管理与垃圾回收(garbage collection)
  • 基于结构共享(structural sharing)对查询结果进行记忆化(memoizing)

如果你看完这份清单仍未感到压力山大,那说明你很可能早已解决了所有服务端状态问题,理应获得一枚奖章。然而,如果你和绝大多数开发者一样,尚未应对甚至尚未开始应对其中大部分挑战,那么我们才刚刚触及表层!

TanStack Query 毫无疑问是管理服务端状态的最佳库之一。它开箱即用(out-of-the-box),无需任何配置(zero-config),并能随应用规模增长而按需定制。

TanStack Query 能助你直面并攻克服务端状态带来的种种棘手挑战与障碍,让你掌控应用数据,而非被数据所掌控。

从技术角度看,TanStack Query 很可能会:

  • 帮你从应用中移除大量复杂且易被误解的代码,并仅用寥寥数行 TanStack Query 逻辑取而代之;
  • 让应用更易于维护,并在新增功能时无需担忧如何接入新的服务端状态数据源;
  • 直接提升终端用户体验,使你的应用响应更快、感觉更流畅;
  • 潜在地帮你节省带宽并提升内存性能。

你说服我了,接下来该怎么做?

本页为 TanStack Query 文档(Vue 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de