Vue 3 工程提效：用 VueUse 组合式工具库落地暗色、本地存储与防抖

为什么直接引入 VueUse

VueUse 是一组 SSR 友好的组合式函数集合，覆盖浏览器、传感器、网络、状态等上百个场景。它不绑定框架实现细节，按需引入，能替掉大量样板代码。

1 useDark 一行暗色模式

useDark 自动在 html 上加 class 并和系统的配色偏好联动，useToggle 负责切换。

import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
// 模板里 <button @click="toggleDark()">切换</button>

2 useStorage 把状态持久化

用 useStorage 声明的响应式变量会同步写入 localStorage，刷新页面后自动恢复，省去手写 watch 与读写。

import { useStorage } from "@vueuse/core";

const token = useStorage("token", "");
const settings = useStorage("settings", { theme: "light", pageSize: 20 });
// token.value 的改动会自动落盘

3 useFetch 接管数据请求

相比手写 axios，useFetch 直接返回响应式的 data、error 与 loading，并自动在组件卸载时忽略过期结果。

import { useFetch } from "@vueuse/core";

const { data, error, isFetching, execute } = useFetch(
  "/api/user",
  { refetch: true }
).json();

4 useDebounceFn 与 onClickOutside

搜索框防抖、点击外部关闭弹层这类交互，VueUse 都给了现成封装。

import { onClickOutside, useDebounceFn } from "@vueuse/core";
import { ref } from "vue";

const panel = ref(null);
const search = ref("");

const onClose = () => { /* 关闭面板 */ };
onClickOutside(panel, onClose);

const runSearch = useDebounceFn(() => {
  // 调接口
}, 300);

体积与注意事项

• VueUse 支持按需 tree-shaking，只打包用到的函数，不会整体进场。
• 涉及浏览器的函数（如 onClickOutside）在服务端渲染时要放在 onMounted 或客户端守卫内。
• 函数默认依赖 Vue 3，不要和 Vue 2 项目混用。