皮皮网

1.ramdaԴ??

ramdaԴ??

       摘要：一款基于Vue组合式API的函数工具集。

       本文分享自华为云社区《vueuse:我不许身为vuer的前端,你的工具集只有lodash!》，作者：前端要摸鱼。

       vueuse 是什么？一款基于Vue组合式API的函数工具集。

       以上是官方网站关于它的定义。

       首先，github源码更新它基于Vue Composition Api (组合式API)，只有在支持组合式API的环境下，才可以正常使用它；什么是组合式API？

       然后，它是一款函数工具集（可类比为lodash.js/ramda.js）；

       简单来说，这是一个能让你更早下班的工具库。

       vueuse 开源吗？现状如何？当然开源！github/vueuse

       star数：6.3K

       社区活跃度：社区非常活跃，rubyminer 源码截止年月，一直有mr被合入主线；

       被引用情况：截止年月日，npm上可查询到依赖它的库就有个，其中包括著名UI库：Element-Plus

       那位常年被调侃“懂个锤子Vue”的著名开源作者Evan You也是此库的金牌赞助商；

       安装 vueuse

       注： VueUse 借助 vue-demi 的强大功能,可以在一个包中同时适用于 Vue 2 和 3！

       Vue 3 Demo: 使用vite: github.com/vueuse/vueus...

       使用Webpack: github.com/vueuse/vueus...

       Vue 2 Demo: Vue CLI

       使用Vue CLI: github.com/vueuse/vueus...

       另外，要注意库的源码绑定版本：

       从v6.0版本起，vue3 需要 vue >= v3.2; vue2 需要依赖@vue/composition-api>@vue/composition >= v1.1

       vueuse 能做什么？能做的那可太多了，但总体上分为以下几个类别提供工具函数：

       这么列了一遍，估计你还是很懵，但因为方法实在太多，也不可能一个个都列出来。

       那我就举几个有代表性的源码整装例子，带你快速理解这些方法大概是做什么的，有什么特点；

       例子1: useMouse

       效果：

       Wooooow~~~

       这可太简单易用了！亲人们，给我买！！（误）

       经过源码阅读，kaldi源码我们可以发现，这短短的一个方法，至少做了以下这些事：

       如果这些逻辑放到页面里，至少需要6行代码，这些代码后期都会增加维护人员理解页面的成本；

       而现在，你只需要一行代码；

       除此之外，该方法还有组件式用法，适合更热爱标签的盆友

       例子2: useInterval

       顾名思义，这个方法是对延时重复调用能力的封装；

       看看效果：

       是不是很好用？相比手写setInterval更为便捷。

       如果徒手实现这样一个套方法，多少行暂且不说，我们需要在业务中写下大量的逻辑代码。

       而众所周知：

       写的代码越多，出Bug的可能性越大，维护和理解的难度就越高。

       从这个角度看，这个库确实是一个合格的函数工具集；

       例子3：useVModel

       这是一个给经常封装组件的小伙伴的大好利器。

       先创建一个组件：Test.vue

       接着，在index.vue中使用它

       对于有组件封装需求的朋友，这个方法墙裂推荐！

       不用再为了单项数据流的组件封装，而写在组件内写冗余的代码了。直接将useVModel返回的数据作为响应式对象用即可。

       这可太得劲儿了~~