VueUse的使用

VueUse的使用

VueUse 是基于 Vue 3 Composition API 封装的“工具函数”集合，被社区称为“Vue 瑞士军刀”。它把项目中反复出现的逻辑（本地存储、鼠标位置、防抖节流、剪贴板、全屏、息屏检测……）全部做成“可组合函数（Composable）”，直接在 setup() 里 import 就能用，无需再自己写一堆样板代码。

一、安装与按需引入

1. 安装核心包

npm i @vueuse/core
# 如需要音效、动画、路由等再装对应扩展包
npm i @vueuse/sound @vueuse/motion @vueuse/router

1. 按需引入

// 只拿需要的函数
import { useMouse, useLocalStorage, useDebounceFn } from '@vueuse/core'

---

二、10 行代码就能跑起来的 6 个高频场景

需求	关键 API	最小可运行片段
1. 实时鼠标坐标	useMouse	const { x, y } = useMouse() 直接绑定模板 {{ x }},{{ y }}
2. 本地存储双向绑定	useStorage	const name = useStorage('uname', 'tom') 输入框 v-model="name" 刷新仍保存
3. 按钮防抖	useDebounceFn	const submit = useDebounceFn(() => api(), 500) 快速点击只执行 1 次
4. 元素是否进可视区	useElementVisibility	const target = ref(); const isShow = useElementVisibility(target) 做“懒加载/埋点”利器
5. 一键复制	useClipboard	const { copy, isSupported } = useClipboard() copy('文本') 自动兼容旧浏览器
6. 页面标题动态化	useTitle	useTitle computed(()=> 未读${count} 条消息) 微信未读红点同款

---

三、进阶：组合多个函数做业务

需求：做一个“拖拽上传”区域，要求

• 进入页面临时改标题
• 拖拽时高亮区域
• 松手后调接口并防抖
• 上传结果写入本地缓存，刷新可恢复列表

<script setup>
import { ref, computed } from 'vue'
import {
  useTitle, useDropZone, useDebounceFn, useLocalStorage
} from '@vueuse/core'

// 1. 标题
useTitle(computed(() =>
  files.value.length ? `已选 ${files.value.length} 个文件` : '拖拽上传 Demo'
))

// 2. 列表 + 缓存
const files = useLocalStorage('upload-files', [])

// 3. 拖拽区域
const dropRef = ref()
const { isOverDropZone } = useDropZone(dropRef, (droppedFiles) => {
  upload(droppedFiles.map(f => f.name))
})

// 4. 防抖上传
const upload = useDebounceFn((newFiles) => {
  // 模拟接口
  files.value = [...files.value, ...newFiles]
}, 600)
</script>

<template>
  <div
    ref="dropRef"
    class="box"
    :class="{ active: isOverDropZone }"
  >
    把文件拖进来（已缓存 {{ files.length }} 个）
  </div>
</template>

<style scoped>
.box { border: 2px dashed #ccc; padding: 40px; }
.active { border-color: #42b883; background: #f0f9ff; }
</style>

上面 30 行代码即完成“标题变化 + 拖拽高亮 + 防抖上传 + 本地缓存”完整链路，无需手动 addEventListener、setTimeout、localStorage.setItem