写点什么

【一库】vueuse: 我不许身为 vuer, 你的工具集只有 lodash!

作者:摸鱼的春哥
  • 2022 年 7 月 04 日
  • 本文字数:1998 字

    阅读完需:约 7 分钟

【一库】vueuse:我不许身为vuer,你的工具集只有lodash!

vueuse 是什么?

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


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


首先,它基于 Vue Composition Api (组合式 API),只有在支持组合式 API 的环境下,才可以正常使用它;什么是组合式API?


然后,它是一款函数工具集(可类比为 lodash.js/ramda.js);


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

vueuse 开源吗?现状如何?

当然开源github/vueuse


star 数:6.3K


社区活跃度:社区非常活跃,截止 2021 年 11 月,一直有 mr 被合入主线;


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


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


安装 vueuse

npm i @vueuse/core// oryarn add @vueuse/core
复制代码


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



Vue 3 Demo:


使用 vite: https://github.com/vueuse/vueuse-vite-starter

使用 Webpack: https://github.com/vueuse/vueuse-vue3-example


Vue 2 Demo: Vue CLI


使用 Vue CLI: https://github.com/vueuse/vueuse-vue2-example


另外,要注意库的版本:


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

vueuse 能做什么?

能做的那可太多了,但总体上分为以下几个类别提供工具函数:


  • 动画

  • 浏览器

  • 组件

  • 格式化

  • 传感器

  • State(状态机)

  • 公共方法

  • 监听

  • 杂项


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


那我就举几个有代表性的例子,带你快速理解这些方法大概是做什么的,有什么特点;


例子 1: useMouse

<template>  <div id="app">    <h3>Mouse: {{x}} x {{y}}</h3>  </div></template><script setup lang="ts">import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()</script>
复制代码


效果:



Wooooow~~~这可太简单易用了!亲人们,给我买!!(误)


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


  • 创建了 x 和 y 这两个响应式对象(Ref);

  • 给 window 添加了鼠标事件监听,将鼠标的坐标实时赋给 x,y;(并且还做了移动端兼容)


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


而现在,你只需要一行代码;


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


<UseMouse v-slot="{ x, y }">  x: {{ x }}  y: {{ y }}</UseMouse>
复制代码

例子 2: useInterval

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


<script setup lang="ts">import { useInterval } from '.'const { counter, pause, resume } = useInterval(200, { controls: true })
// counter 一个 Ref 对象,它是响应式的,counter.value等于已经计数的次数// pause() 暂停// resume() 恢复 </script>
<template> <div id="APP"> <p>Interval fired: {{ counter }}</p> </div></template>
复制代码


看看效果:



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


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


而众所周知:


写的代码越多,出 Bug 的可能性越大,维护和理解的难度就越高。从这个角度看,这个库确实是一个合格的函数工具集;

例子 3:useVModel

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


先创建一个组件:Test.vue


<template>  <div>    name:    <input v-model="_name"/>    age:    <input v-model="_age"/>    sex:    <input v-model="_sex"/>  </div></template><script lang="ts" setup>import { useVModel } from '@vueuse/core'const props = defineProps({  name: String,  age: String,  sex: String})const emit = defineEmits(['update:name', 'update:age', 'update:sex'])
const _name = useVModel(props, 'name', emit)const _age = useVModel(props, 'age', emit)const _sex = useVModel(props, 'sex', emit)</script>
复制代码


接着,在index.vue中使用它


<template>  <div>    <Test    v-model:name="formData.name"    v-model:age="formData.age"    v-model:sex="formData.sex"    ></Test>    {{ formData }}  </div></template>
<script setup lang="ts">import { reactive } from 'vue-demi';import Test from './Test.vue'const formData = reactive({ name: 'lily', age: '8', sex: 'boy'})</script>
复制代码



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


不用再为了单项数据流的组件封装,而写在组件内写冗余的代码了。


直接将useVModel返回的数据作为响应式对象用即可。


这可太得劲儿了~~


今天我要 18:00 准时下班,谁都别拦我!


最后

例子太多,就不再一一介绍了,但大家应该已经有了一个初步的概念,知道了此库的作用,一言以蔽之:助力摸鱼,提前下班


它没办法做到你之前做不到的事情。


它只能做到让你更轻松的完成工作~


愿你今天也能按时下班。

发布于: 刚刚阅读数: 6
用户头像

还未添加个人签名 2022.01.08 加入

还未添加个人简介

评论

发布
暂无评论
【一库】vueuse:我不许身为vuer,你的工具集只有lodash!_Vue_摸鱼的春哥_InfoQ写作社区