VueUse的使用
VueUse的使用
VueUse 是基于 Vue 3 Composition API 封装的“工具函数”集合，被社区称为“Vue 瑞士军刀”。它把项目中反复出现的逻辑（本地存储、鼠标位置、防抖节流、剪贴板、全屏、息屏检测……）全部做成“可组合函数（Composable）”，直接在 setup() 里 import 就能用，无需再自己写一堆样板代码。
一、安装与按需引入
- 安装核心包
npm i @vueuse/core
# 如需要音效、动画、路由等再装对应扩展包
npm i @vueuse/sound @vueuse/motion @vueuse/router
- 按需引入
// 只拿需要的函数
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><divref="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