都 2022 年了，你的前端工具集应该有 vueuse

作者：华为云开发者社区

2022 年 1 月 17 日
本文字数：1977 字
阅读完需：约 6 分钟

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

本文分享自华为云社区《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: github.com/vueuse/vueuse-vite-starter使用 Webpack: github.com/vueuse/vueuse-vue3-example

Vue 2 Demo: Vue CLI

使用 Vue CLI: 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 返回的数据作为响应式对象用即可。

这可太得劲儿了~~

点击关注，第一时间了解华为云新鲜技术~

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/1044465476b15535ce872c69d】。文章转载请联系作者。

华为云开发者社区

关注

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态，方便开发者快速成长与发展，欢迎提问、互动，多方位了解云计算！传送门：https://bbs.huaweicloud.com/

发布

暂无评论

创作场景

都 2022 年了，你的前端工具集应该有 vueuse

vueuse 是什么?

vueuse 开源吗？现状如何？

安装 vueuse

Vue 3 Demo:

Vue 2 Demo: Vue CLI

vueuse 能做什么？

例子 1: useMouse

例子 2: useInterval

例子 3：useVModel

华为云开发者社区

评论