VueUse 详细介绍及使用示例

VueUse 是一个基于 Vue Composition API 的实用工具函数库，为 Vue 2 和 Vue 3 提供了 200+ 开箱即用的函数，覆盖浏览器操作、状态管理、动画控制等场景，被开发者称为“Vue 组合式 API 的瑞士军刀”。以下是其核心特性、使用场景及示例：

一、核心特性

  1. 全面兼容
    支持 Vue 2（需 @vue/composition-api）和 Vue 3，无缝迁移现有项目。
  2. 按需引入
    支持 Tree-shaking，仅打包使用到的函数，最小化代码体积。
  3. 类型安全
    基于 TypeScript 开发，提供完善的类型提示和文档。
  4. 功能丰富
    包含浏览器 API 封装（如剪贴板、全屏）、传感器（鼠标、滚动）、状态管理（本地存储）、工具函数（防抖、节流）等。
  5. 灵活扩展
    支持插件系统（如 Vue Router、Firebase）和自定义事件过滤器。

二、安装与基础使用

安装 

npm install @vueuse/core
# 或使用 CDN
<script src="https://unpkg.com/@vueuse/core"></script>

示例 1：实时追踪鼠标位置 

<template>
  <div>鼠标坐标：X={{ x }}, Y={{ y }}</div>
</template>

<script setup>
import { useMouse } from '@vueuse/core';
const { x, y } = useMouse({ type: 'page' }); // 监听页面相对坐标
</script>
  • 功能：useMouse 返回响应式的鼠标坐标，支持移动端触摸事件。

示例 2：持久化状态到 localStorage 

import { useLocalStorage } from '@vueuse/core';
// 自动同步到 localStorage，键名为 "theme"
const theme = useLocalStorage('theme', 'light');
theme.value = 'dark'; // 修改后 localStorage 自动更新
  • 扩展：结合 throttleFilter 实现节流存储，避免频繁写入。

三、常用功能分类

1. 浏览器交互
  • useClipboard：剪贴板读写 
    const { copy, text } = useClipboard();
copy('Hello VueUse!'); // 复制文本到剪贴板
  • useFullscreen：控制全屏 
    const { isFullscreen, enter, exit } = useFullscreen();
  • useTitle：动态修改页面标题 
    const title = useTitle('初始标题');
title.value = '新标题'; // 页面标题实时更新
2. 传感器与 DOM
  • useWindowSize：响应式获取窗口尺寸 
    const { width, height } = useWindowSize();
  • useElementVisibility：检测元素是否在视口内 
    <template>
  <div ref="el">滚动到可见区域时触发</div>
</template>
<script setup>
import { useElementVisibility } from '@vueuse/core';
const el = ref(null);
const isVisible = useElementVisibility(el);
</script>
3. 状态管理
  • useStorage：统一管理 localStorage/sessionStorage 
    const data = useStorage('key', { count: 0 }); // 自动序列化对象
  • createGlobalState：创建全局共享状态 
    // store.js
import { createGlobalState, useStorage } from '@vueuse/core';
export const useGlobalStore = createGlobalState(() => useStorage('store', {}));
4. 工具函数
  • useDebounceFn / useThrottleFn：防抖与节流 
    const debouncedFn = useDebounceFn(() => { /* 逻辑 */ }, 300);
window.addEventListener('resize', debouncedFn);
  • useInterval：定时任务 
    const { counter, pause, resume } = useInterval(1000); // 每秒计数+1

四、注意事项

  1. Composition API 基础：需熟悉 Vue 3 的 setup 语法和响应式原理。
  2. 按需引入：避免全局导入，减少打包体积。
  3. TypeScript 支持：结合 IDE 类型提示提升开发效率。

五、总结

VueUse 通过标准化、高复用的函数，显著减少开发者自行封装工具的成本，尤其适合需要快速响应复杂交互的场景。其活跃的社区（GitHub 20k+ Star）和详尽的官方文档（含交互式演示）进一步降低了学习门槛。无论是优化现有项目还是开发新应用，VueUse 都是提升效率的利器。