V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoliaoliao
V2EX  ›  Vue.js

vu-query: vue3 最好用的请求库之一

  •  1
     
  •   xiaoliaoliao · 2021-01-25 09:48:36 +08:00 · 2475 次点击
    这是一个创建于 681 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    名字的由来 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 的可用性问题。不用担心上手难的问题,文档中也有很多写好的项目可以参照。

    仓库与文档

    介绍

    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 的测试工具也没有出,等测试工具发布之后会加上完整的测试用例。
    7 条回复    2021-01-28 13:30:20 +08:00
    zhuangzhuang1988
        1
    zhuangzhuang1988  
       2021-01-25 11:51:36 +08:00 via Android
    vue 只用官方三大件,再加 ui 库 别的很少用
    Sapp
        2
    Sapp  
       2021-01-25 13:20:55 +08:00   ❤️ 1
    可以看看 swr 这个库,虽然是 react 的,但是某些玩法还是很有意思的
    wunonglin
        3
    wunonglin  
       2021-01-25 13:31:08 +08:00
    rxjs 能满足你 90%的需求,剩下的 10%你可以自己写 pipe 即可
    xiaoliaoliao
        4
    xiaoliaoliao  
    OP
       2021-01-25 14:14:32 +08:00
    @Sapp swr 没有前端缓存,没有渲染优化还是差 react-query 很多
    xiaoliaoliao
        5
    xiaoliaoliao  
    OP
       2021-01-25 14:17:57 +08:00
    @wunonglin rxjs 在特别复杂的应用肯定是有它独特的优势的,但没有那么简单好用
    shuding
        6
    shuding  
       2021-01-28 03:35:33 +08:00
    @xiaoliaoliao SWR 有前端缓存,也有渲染优化。相关文档在这里: https://swr.vercel.app/advanced/performance
    xiaoliaoliao
        7
    xiaoliaoliao  
    OP
       2021-01-28 13:30:20 +08:00
    @shuding 刚看了下,是我的疏忽了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1695 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 17:41 · PVG 01:41 · LAX 09:41 · JFK 12:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.