名字的由来 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 中获取,缓存和更新异步数据
尽管大多数传统状态管理库非常适合使用客户端状态,但它们不太适合使用异步或服务器状态。这是因为“服务器状态完全不同”。对于初学者,服务器状态:
一旦掌握了应用程序中服务器状态的性质,随之而来的还有更多挑战,例如:
如果您不被该列表所淹没,那必须意味着您可能已经解决了所有服务器状态问题,应该得到奖励。但是,如果您像绝大多数人一样,或者尚未解决所有或大多数这些挑战,那么我们只是在摸索!
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')
1
zhuangzhuang1988 2021-01-25 11:51:36 +08:00 via Android
vue 只用官方三大件,再加 ui 库 别的很少用
|
2
Sapp 2021-01-25 13:20:55 +08:00 1
可以看看 swr 这个库,虽然是 react 的,但是某些玩法还是很有意思的
|
3
wunonglin 2021-01-25 13:31:08 +08:00
rxjs 能满足你 90%的需求,剩下的 10%你可以自己写 pipe 即可
|
4
xiaoliaoliao OP @Sapp swr 没有前端缓存,没有渲染优化还是差 react-query 很多
|
5
xiaoliaoliao OP @wunonglin rxjs 在特别复杂的应用肯定是有它独特的优势的,但没有那么简单好用
|
6
shuding 2021-01-28 03:35:33 +08:00
@xiaoliaoliao SWR 有前端缓存,也有渲染优化。相关文档在这里: https://swr.vercel.app/advanced/performance
|
7
xiaoliaoliao OP @shuding 刚看了下,是我的疏忽了
|