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

前言

名字的由来 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 () => (
    

      

        {query.data?.map(todo => (
          
{todo.title}
        ))}
      

       {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      
    
  )
})

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

const App = defineComponent({
  render() {
    return (
      // Provide the client to your App
      
        
      
    )
  },
})

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

待办

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