vu-query: 目前vue3最好用的请求缓存库

Posted 2021-10-05 了了

前言

名字的由来 vue + use + query = vu-query
前面两年一直都在写vue，当时在写业务的时候我总是被数据的缓存和重复实现的分页和延迟加载数据所困扰。直到今年换了react的技术栈之后发现其实社区已经有了很多这种轮子，例如react-query、swr等等。但是在写了一段时间的react之后，发现要写出一个性能很好的react应用真的要写很多很多啰嗦的代码，不久之后开始对这些繁琐的事情感到厌烦。开始怀念起写vue的时候不用特别优化就能写出性能不错的代码来。上一年年6月时想着不如整一个vue版的react-query的轮子出来怎么样，但是由于拖延症的原因到上个月才开始着手（笑），到了今天终于发布了1.0的版本。它的核心实现来自于react-query，由于本身react-query已经是一个特别成熟的数据请求库，所以也不用担心vu-query的可用性问题。不用担心上手难的问题，文档中也有很多写好的项目可以参照。

仓库与文档

• github仓库
• 文档
• 示例

介绍

Composables API，用于在Vue 3中获取，缓存和更新异步数据

尽管大多数传统状态管理库非常适合使用客户端状态，但它们不太适合使用异步或服务器状态。这是因为“服务器状态完全不同”。对于初学者，服务器状态：

• 远程保存在您无法控制或拥有的位置
• 需要异步API进行获取和更新
• 表示共享所有权，在您不知情的情况下可以被其他人更改
• 如果您不小心，可能会导致应用程序“过时”

一旦掌握了应用程序中服务器状态的性质，随之而来的还有更多挑战，例如：

• 缓存...（这可能是编程中最难的事情）
• 将对同一数据的多个请求重复处理为单个请求
• 在后台更新过期数据
• 知道数据何时“过时”
• 尽快反映对数据的更新
• 优化性能，例如分页和延迟加载数据
• 管理服务器状态的内存和垃圾回收
• 通过结构共享记忆查询结果

如果您不被该列表所淹没，那必须意味着您可能已经解决了所有服务器状态问题，应该得到奖励。但是，如果您像绝大多数人一样，或者尚未解决所有或大多数这些挑战，那么我们只是在摸索！

Vu Query是用于管理服务器状态的最好的库之一。它开箱即用，配置为零，效果非常好，并且可以随应用程序的增长进行定制**。

通过Vu Query，您可以克服服务状态的棘手挑战和障碍，并在开始控制您的应用程序数据之前对其进行控制。

从技术上讲，Vu Query可能会：

• 帮助您从应用程序中删除 多行复杂和误解的代码，并替换为几行Vu Query逻辑。
• 使您的应用程序更易于维护，更易于构建新功能，而不必担心连接新的服务器状态数据源
• 使您的应用程序比以往任何时候都更快，更灵敏，对最终用户有直接影响。
• 潜在地帮助您节省带宽并提高内存性能

快速开始

此示例非常简要地说明了Vu Query的3个核心概念：

• 查询
• 变异
• 使查询无效

这三个概念构成了Vu Query的大部分核心功能。

import { defineComponent, createApp } from \'vue\'
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from \'vu-query\'
import { getTodos, postTodo } from \'../my-api\'

const Todos = defineComponent(() => {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery(\'todos\', getTodos)

  // Mutations
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries(\'todos\')
    },
  })

  return () => (
    <div>
      <ul>
        {query.data?.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: \'Do Laundry\',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
})

// Create a client
const queryClient = new QueryClient()

const App = defineComponent({
  render() {
    return (
      // Provide the client to your App
      <QueryClientProvider client={queryClient}>
        <Todos />
      </QueryClientProvider>
    )
  },
})

createApp(App).mount(\'#app\')

待办

• 文档因为也是由react-query的文档复制修改而来的，所以没有中文的，或许之后会加上。
• 由于vue3的测试工具也没有出，等测试工具发布之后会加上完整的测试用例。