VueUse 是一组基于Composition API的实用函数。在继续之前，我们假设您已经熟悉Composition API的基本概念。
根本上它就是一个工具集。里面封装了许多常用功能，开箱即用，非常方便。官网：vueuse
安装
npm i @vueuse/core
或者建议这样安装：
npm i @vueuse/core @vueuse/components
这样安装的好处是，在 v5.0 中，官方引入了一个新包，@vueuse/components提供可组合函数的无渲染组件版本。
使用
工具库划分了几个大类：broswer(浏览器相关)，Sensors(传感器相关)，Animation(动画相关)，Utilities(公用事业)这里举几个常用的例子，方便大家了解入门：
Sensors(传感器相关)
监听元素外部的点击。对模式或下拉菜单很有用。
用法：
<template>
<div ref="target">
Hello world
</div>
<div>
Outside element
</div>
</template>
<script>
import {
ref } from 'vue'
import {
onClickOutside } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
onClickOutside(target, (event) => console.log(event))
return {
target }
}
}
</script>
指令用法：
@vueuse/components此函数还通过包提供指令版本（所以安装时我就使用的第二种安装）
<script setup lang="ts">
import {
ref } from 'vue'
import {
vOnClickOutside } from '@vueuse/components'
const modal = ref(false)
function closeModal() {
modal.value = false
}
</script>
<template>
<button @click="modal = true">
Open Modal
</button>
<div v-if="modal" v-on-click-outside="closeModal">
Hello World
</div>
</template>
这个之前我自己有写过vue3框架下的自定义指令，链接在这：vue3中通过自定义指令，实现点击空白处触发事件，点击非自身dom触发事件
虽然用起来没问题，但是既然vueuse内有这个工具，那我们也可以直接使用起来！
譬如：HTML元素的响应式边界框
用法:
<template>
<div ref="el" />
</template>
<script>
import {
ref } from 'vue'
import {
useElementBounding } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const {
x, y, top, right, bottom, left, width, height } = useElementBounding(el)
return {
el,
/* ... */
}
}
}
</script>
譬如：可以反应窗口大小
用法:
import {
useWindowSize } from '@vueuse/core'
const {
width, height } = useWindowSize()
broswer(浏览器相关)
反应式剪贴板 API。提供响应剪贴板命令（剪切、复制和粘贴）以及异步读取和写入系统剪贴板的能力。对剪贴板内容的访问受权限 API的限制。未经用户许可，不允许读取或更改剪贴板内容。
用法:
import {
useClipboard } from '@vueuse/core'
const source = ref('Hello')
const {
text, copy, copied, isSupported } = useClipboard({
source })
<div v-if="isSupported">
<button @click='copy(source)'>
<!-- by default, `copied` will be reset in 1.5s -->
<span v-if='!copied'>Copy</span>
<span v-else>Copied!</span>
</button>
<p>
Current copied: <code>{
{
text || 'none' }}</code>
</p>
</div>
<p v-else>
Your browser does not support Clipboard API
</p>
设置为在剪贴板 API不可用legacy: true时保留复制能力。它将使用execCommand处理副本作为后备。
Utilities(公用事业)
函数的去抖动执行。
Debounce 是一个超负荷的服务员：如果你一直问他，你的请求将被忽略，直到你停下来给他一些时间来考虑你最近的询问。
用法:
import {
useDebounceFn } from '@vueuse/core'
const debouncedFn = useDebounceFn(() => {
// 需要被i节流的操作
}, 1000)
window.addEventListener('resize', debouncedFn)
前两个参数说明：{可以放被节流的函数}，时间。
您还可以将第三个参数传递给它，具有最长等待时间。
import {
useDebounceFn } from '@vueuse/core'
// 如果重复输入超过 5000ms 没有调用，
// 该函数无论如何都会被调用。
const debouncedFn = useDebounceFn(() => {
// do something
}, 1000, {
maxWait: 5000 })
window.addEventListener('resize', debouncedFn)
或者，您可以使用 promise 操作获取函数的返回值。
import {
useDebounceFn } from '@vueuse/core'
const debouncedRequest = useDebounceFn(() => 'response', 1000)
debouncedRequest().then((value) => {
console.log(value) // 'response'
})
// or use async/await
async function doRequest() {
const value = await debouncedRequest()
console.log(value) // 'response'
}
由于未处理的拒绝错误在开发人员不需要返回值时非常烦人，因此如果默认取消函数，则不会拒绝承诺。您需要指定捕获拒绝的选项。rejectOnCancel: true
import {
useDebounceFn } from '@vueuse/core'
const debouncedRequest = useDebounceFn(() => 'response', 1000, {
rejectOnCancel: true })
debouncedRequest()
.then((value) => {
// 做某事
})
.catch(() => {
// 取消时做某事
})
// 再次调用它会取消之前的请求并被拒绝
setTimeout(debouncedRequest, 500)
限制函数的执行。对于限制处理程序在调整大小和滚动等事件上的执行速度特别有用。
Throttle 是一个抛球的弹簧：球飞出去后需要一定时间缩回，所以除非准备好，否则不能再抛球。
用法:
import {
useThrottleFn } from '@vueuse/core'
const throttledFn = useThrottleFn(() => {
// 做某事，每秒最多调用 1 次
}, 1000)
window.addEventListener('resize', throttledFn)