VueUse——一个提升开发效率的Vue3工具库，让你早早下班

VueUse——一个大大提升开发效率的Vue3工具库，让你早下班

关注微信公众号“前端大侦探”了解更多精彩内容！

前言

VueUse是一个基于 Composition API 实现的基本 Vue 组合实用函数的集合。

VueUse可能是受到了react-use的启发，可以看做是vue版的hook，Vue Compostion API支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用，大大地提高你的开发效率在，避免自己去封装一些常用的功能函数，比如：防抖，节流，定时器等。

几天前，一个偶然的机会发现看到Element-plus组件库的源码中已经大量的使用了VueUse，所以可以大胆地在项目中使用了。

官网地址：https://vueuse.org/

一、特征

无缝迁移：同时支持Vue2和Vue3
支持按需引入：只取你想要的
强类型：用 TypeScript 编写，带有 TS Docs
灵活：可配置的事件过滤器
无需打包：支持CDN方式引入使用
功能丰富：截止目前180+功能任你选择
友好的SSR：与服务器端渲染/生成完美配合
互动演示：功能文档还附带互动演示
附加插件：支持Router、Firebase、RxJS等多种插件

二、安装

命令安装

npm

npm i @vueuse/core

yarn

yarn add @vueuse/core

CDN引入

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

作为 window.VueUse 暴露给全局。

三、使用

VueUse里面功能非常的丰富，可能并不是每一功能函数我们都能用到，所以我们用到哪一个功能函数在组件中按需引入就可以了。比如：下面我们就结合代码介绍几个常用的功能函数的使用方法。

1、useMouse——获取鼠标位置

useMouse是一个实时监听鼠标位置变化并返回当前鼠标位置坐标x，y的一个方法。

先看useMouse的类型声明：

export interface MouseOptions extends ConfigurableWindow {// 鼠标的位置是相对页面还是浏览器，默认是页面type?: "page" | "client"// 监听 `touchmove` 事件，用于移动端，默认truetouch?: boolean// 触发`touchend`事件时重置为初始值，默认falseresetOnTouchEnds?: boolean// 可以设置初始值initialValue?: Position
}
// 源类型是鼠标还触摸
export declare type MouseSourceType = "mouse" | "touch" | nullexport declare function useMouse(options?: MouseOptions): {x: Ref<number>y: Ref<number>sourceType: Ref<MouseSourceType>
}
export declare type UseMouseReturn = ReturnType<typeof useMouse>

demo代码：

<template><div><p>x的值：{{ x }}</p><p>y的值：{{ y }}</p></div>
</template><script lang="ts" setup>import { useMouse } from '@vueuse/core';const { x, y } = useMouse({type: 'page',touch: true,resetOnTouchEnds: false,initialValue: {x: 100,y: 200}})
</script>

效果图：

2、useCounter——具有实用功能的基本计数器。

先看useCounter的类型声明：

// options配置类型
export interface UseCounterOptions {min?: numbermax?: number
}
export declare function useCounter(// 初始值initialValue?: number,// 设置最大值最小值options?: UseCounterOptions
): {// 计数器count: Ref<number>// 递增函数方法，方法里面可以传计数器步长，接受整数，小数，负数inc: (delta?: number) => number// 递减函数方法，方法里面可以传计数器步长，接受整数，小数，负数dec: (delta?: number) => numberget: () => number// 设置计数器set: (val: number) => number// 重置计数器reset: (val?: number) => number
}

demo代码：

<template><div><p>Count: {{ count }}</p><button @click="inc()">Increment</button><button @click="dec()">Decrement</button><button @click="inc(5.5)">Increment (+5.5)</button><button @click="dec(5)">Decrement (-5)</button><button @click="set(100)">Set (100)</button><button @click="reset()">Reset</button></div>
</template><script setup lang="ts">import { useCounter } from '@vueuse/core';const { count, inc, dec, set, reset } = useCounter(1)
</script>

效果图：

3、useLocalStorage、useStorage——响应式本地化存储，用作本地数据持久化。

默认情况下，useStorage 会根据提供的默认值的数据类型智能地使用相应的序列化器。例如，JSON.stringify / JSON.parse 将用于对象，Number.toString / parseFloat 用于数字等。也就是说，之前使用
localStorage/sessionStorage存储一个对象时，我们要自己给这个对象使用JSON.stringify进行序列化，现在使用useLocalStorage会根据我们传入的数据类型自动的给我们序列化。

useLocalStorage、useSessionStorage、useStorage它们的用法都是一样的。

demo代码：

<template><div><p>名称：{{ state.name }}</p><p>定位：{{ state.type }}</p><p>阵营：{{ state.camp }}</p><button @click="handleLocalStorage">UseLocalStorage</button><button @click="handleReset">Reset</button></div>
</template><script setup lang="ts">
import { useLocalStorage } from '@vueuse/core';const state = useLocalStorage('my-lol', {name: '泰达米尔',type: '战士',camp: '弗雷尔卓德'
})// 如果没有初始值时，可以设置null
// const state = useLocalStorage('my-lol', null)const handleLocalStorage = () => {// 给LocalStorage my-lol重新赋值state.value = {name: '深渊巨口',type: '射手',camp: '虚空之地'}
}
// 删除LocalStorage my-lol的值
const handleReset = () => {state.value = null
}
</script>

useStorage默认为localStorage。

import { useStorage } from '@vueuse/core'// 对象类型
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })// 布尔类型
const flag = useStorage('my-flag', true) // 数字类型
const count = useStorage('my-count', 0) // 使用sessionStorage
const id = useStorage('my-id', 'some-string-id', sessionStorage) // 删除某个key值
state.value = null

4、useDebounceFn——防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

demo代码：

<template><p> {{ counter }}</p><button @click="clickedFn">UseDebounceFn</button>
</template><script setup lang="ts">import { ref } from 'vue'import { useDebounceFn } from '@vueuse/core'const counter = ref(0)// 第三个参数为最大等待时间，类似于 lodash debounceconst debouncedFn = useDebounceFn(() => {counter.value += 1}, 1000, { maxWait: 5000 })const clickedFn = () => {debouncedFn()}
</script>

5、useTitle

设置网页的title，是对document.title的封装。

demo代码：

<template><p>{{ title }}</p>
</template><script setup lang="ts">
import { ref, computed } from 'vue';
import { useTitle } from '@vueuse/core';const name = ref('Hello');
// 动态监听title的变化
const title = computed(() => {return `${name.value}--Hello`;
})useTitle(title); // Hello--Hello
name.value = 'Hi'; // Hi--World
</script>

useTitle的源码解析：

MaybeRef是一个类型工具

type MaybeRef<T> = Ref<T> | T

在VueUse中大量的使用了MaybeRef来支持可选择性的响应式参数。

import { ref, watch } from 'vue';
import { MaybeRef } from '@vueuse/core';export function useTitle(newTitle: MaybeRef<string | null | undefined>
) {const title = ref(newTitle || document.title);watch(title, (t) => {if(t != null) {document.title = t}}, { immediate: true })return title
}

后记

因为VueUse的功能函数很多，这里我们简单介绍了几个常用的函数，更多的功能大家可以到VueUse官方网站去学习使用。本人这在学习使用中，写的不恰当的地方可以指出，大家一起学习。更多精彩内容可以扫码下方二维码关注本人微信公众号“前端大侦探”！