VueUse可能是受到了react-use的启发，可以看做是vue版的hook，Vue Compostion API支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用，大大地提高你的开发效率在，避免自己去封装一些常用的功能函数，比如：防抖，节流，定时器等。
几天前，一个偶然的机会发现看到Element-plus组件库的源码中已经大量的使用了VueUse，所以可以大胆地在项目中使用了。
命令安装
npm
npm i @vueuse/core
yarn
yarn add @vueuse/coreCDN引入
<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` 事件，用于移动端，默认true
touch?: boolean
// 触发`touchend`事件时重置为初始值，默认false
resetOnTouchEnds?: boolean
// 可以设置初始值
initialValue?: Position
}
// 源类型是鼠标还触摸
export declare type MouseSourceType = "mouse" | "touch" | null
export 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>效果图：
VueUse——一个大大提升开发效率的Vue3工具库，让你早下班
useMouse
2、useCounter——具有实用功能的基本计数器。
先看useCounter的类型声明：
// options配置类型
export interface UseCounterOptions {
min?: number
max?: number
}
export declare function useCounter(
// 初始值
initialValue?: number,
// 设置最大值最小值
options?: UseCounterOptions
): {
// 计数器
count: Ref<number>
// 递增函数方法，方法里面可以传计数器步长，接受整数，小数，负数
inc: (delta?: number) => number
// 递减函数方法，方法里面可以传计数器步长，接受整数，小数，负数
dec: (delta?: number) => number
get: () => 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>效果图：
VueUse——一个大大提升开发效率的Vue3工具库，让你早下班
useCounter
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 = null4、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 debounce
const debouncedFn = useDebounceFn(() => {
counter.value += 1
}, 1000, { maxWait: 5000 })
const clickedFn = () => {
debouncedFn()
}
</script>VueUse——一个大大提升开发效率的Vue3工具库，让你早下班
useDebounceFn
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>VueUse——一个大大提升开发效率的Vue3工具库，让你早下班
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官方网站去学习使用。本人这在学习使用中，写的不恰当的地方可以指出，大家一起学习。更多精彩内容可以关注本人微信公众号“前端大侦探”！
