vue名字的由来+use+query=vu-query这两年一直在写vue，一直被数据抓到的时候写业务分页和延迟加载的数据受缓存和重新实现的困扰。今年换了react的技术栈后，发现社区已经有很多这样的轮子了，比如react-query，swr等等。但是在写了一段时间的react之后，我发现要写一个性能好的react应用，确实??需要写很多冗长的代码，很快我就开始厌烦这些繁琐的事情了。开始怀念自己在写vue的时候，不用特别优化也能写出性能不错的代码。去年6月份的时候就想过怎么出一个完整的Vue版本的react-querywheel，但是由于拖延，一直到上个月才开始（笑），今天终于发布了1.0版本。它的核心实现来自react-query。由于react-query本身已经是一个特别成熟的数据请求库，所以不用担心vu-query的可用性问题。不用担心入门的难度。文档中也有很多写好的项目，大家可以参考。存储库和文档github存储库文档示例介绍了用于在Vue3中获取、缓存和更新异步数据的可组合API虽然大多数传统状态管理库非常适合处理客户端状态，但它们不太适合处理异步或服务器-端状态。这是因为“服务器状态完全不同”。对于初学者，服务器状态：远程保存在您不控制或不拥有的位置需要一个异步API来获取和更新代表共享所有权，并且可以在您不知情的情况下被其他人更改如果您不小心“陈旧”可能会破坏您的应用程序“一旦您掌握了应用程序中服务器状态的性质，就会遇到更多挑战，例如：缓存...（这可能是编程中最难的事情）将多次请求相同的数据重复处理在后台更新过期数据单个请求知道数据何时“过时”尽快反映对数据的更新优化性能，例如分页和延迟加载被该列表淹没，这一定意味着您可能已经解决了所有服务器状态问题并且应该得到奖励。但是，如果您像绝大多数人一样，或者还没有解决所有或大部分这些挑战，那么我们只是触及了皮毛！VuQuery是管理服务器状态的最佳库之一。它开箱即用，零配置，并且可以随着应用程序的增长进行定制**。使用VuQuery，您可以克服服务状态的棘手挑战和障碍，并在开始之前获得对应用程序数据的控制。从技术上讲，VuQuery可能：帮助您从应用程序中删除多行复杂且被误解的代码，并用几行VuQuery逻辑替换它。使您的应用程序更易于维护和构建新功能，而无需担心连接到新的服务器状态数据源，从而使您的应用程序比以往任何时候都更快、响应更快，对最终用户产生直接影响。可能帮助您节省带宽并提高内存性能快速入门此示例非常简要地说明了VuQuery的3个核心概念：查询突变使查询无效这三个概念构成了VuQuery的大部分核心功能。import{defineComponent,createApp}from'vue'import{useQuery,useMutation,useQueryClient,QueryClient,QueryClientProvider,}from'vu-query'import{getTodos,postTodo}from'../my-api'constTodos=defineComponent(()=>{//访问客户端constqueryClient=useQueryClient()//查询constquery=useQuery('todos',getTodos)//突变constmutation=useMutation(postTodo,{onSuccess:()=>{//无效并重新获取queryClient.invalidateQueries('todos')},})return()=>(
- {query.data?.map(todo=>(