VueUse 入门：200+ 组合式函数的快乐

防抖、监听鼠标位置、读写剪贴板、本地存储……这些每个项目都要写一遍的轮子，VueUse 里全有，而且是响应式的。

VueUse 是什么

VueUse 是 Vue 3 生态的组合式函数（Composables）工具集——200 多个开箱即用的 useXxx 函数，覆盖事件、状态、网络、动画、传感器等常见需求。

它解决的是一个复利问题：Vue 3 的组合式 API 让逻辑复用变得容易，但「监听鼠标位置」这种基础能力，每个项目都值得有，又没人在业务代码里认真写。VueUse 把这些全做了一遍，统一了命名、处理了边界、保证响应式正确。

pnpm add @vueuse/core

按需引入，摇树友好：import 哪个函数就打包哪个，不用担心体积。

十个高频函数速览

useLocalStorage / useSessionStorage —— 存储变响应式：

import { useLocalStorage } from '@vueuse/core';

// 读写 localStorage 像操作普通 ref，自动同步持久化
const theme = useLocalStorage('theme', 'light');
theme.value = 'dark';      // 已写入 localStorage，且所有引用处响应更新

useDebounceFn / useThrottleFn —— 防抖节流一行搞定：

import { useDebounceFn } from '@vueuse/core';

const search = useDebounceFn((kw) => {
  fetchSearchResult(kw);
}, 300);
// 输入框 @input="search" —— 停止输入 300ms 才真正请求

useMouse —— 鼠标位置：

const { x, y } = useMouse();   // 两个都是响应式的，模板里直接用

useIntersectionObserver —— 元素进视口（懒加载神器）：

const target = ref(null);
const { stop } = useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) {
    loadLazyImage();
    stop();                    // 触发一次后停止监听
  }
});

useClipboard —— 剪贴板：

const { copy, copied } = useClipboard();
await copy('代码片段');
// copied 是 ref，true 时按钮显示「已复制」

useDark —— 深色模式：

import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark();                  // 自动读写 html 的 class + localStorage
const toggleDark = useToggle(isDark);

useTitle —— 响应式标题：

const title = useTitle();
title.value = `消息 (3) - 我的站`;   // 标签页标题即时更新

useEventListener —— 自动清理的事件监听：

useEventListener(window, 'resize', onResize);
// 组件卸载时自动解绑，不用手写 onUnmounted

useDebouncedRef / useTimeoutFn / useMediaQuery —— 名字即功能，用法同上。

为什么它的「响应式」是关键卖点

拿 useLocalStorage 和手写对比就明白了。手写要处理：初始化时读一遍、写入时同步存储、跨标签页同步（storage 事件）、JSON 序列化异常兜底——四件事容易漏一件。VueUse 返回的是真正的 ref，存储的读写、同步、序列化全部内聚在函数里，组件代码里看不出存储的存在，只有一个普通的响应式变量。

这就是组合式函数复用的正确形态：不是复制粘贴一段代码，而是把「一段完整的行为」封装成一个响应式单元。

本站的用法

本站前端依赖里有 @vueuse/core 和 @vueuse/integrations，典型应用如主题切换（useDark）、后台面板的本地偏好持久化（useLocalStorage）、高频交互的防抖处理（useDebounceFn）。integrations 包还桥接了外部库（如 focus-trap 的 useFocusTrap），让第三方能力也以组合式函数的形态出现。

自己写 Composable 的判断题

用 VueUse 之后，偶尔还是要自己封装业务组合式函数。判断标准：

两个以上组件需要同一段「带状态的逻辑」 → 抽成 useXxx；
逻辑里管理了事件监听、定时器 → 记得在 onUnmounted 清理（或直接用 VueUse 的包装函数，清理是免费的）；
名字以 use 开头、返回 ref/函数集合——这是社区约定，遵守它，别人的代码一眼能懂。

小结

VueUse 的定位是「Vue 3 的 lodash + 响应式」：每个函数都小到不值一提，合在一起把前端 80% 的样板逻辑变成了 import 一行。装上它，然后遇到需求先查一遍有没有现成的——这个习惯能帮你省下大量重复代码。