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)