@vueuse/core 是 Vue 生态中基于 Composition API 的实用工具函数集合，可以理解为 “Vue 专属的响应式 Lodash”，由 Vue 核心团队成员维护。

核心定位

它把前端开发中高频使用的浏览器 API、DOM 操作、状态管理、传感器监听等逻辑，封装成开箱即用的组合式函数（Composables），所有返回值基本都是 ref / reactive，天然适配 Vue 3 的响应式体系。

主要特点

  • 函数丰富：提供 200+ 工具函数，覆盖状态、浏览器、传感器、动画、网络、DOM 等场景。
  • 响应式设计：内部自动处理事件绑定、定时器、清理副作用，返回值是响应式数据，可直接在模板或 computed 中使用。
  • TypeScript & Tree-shaking 友好：全量 TS 编写，按需引入不会增加多余打包体积。
  • 跨版本支持：通过 vue-demi 同时兼容 Vue 3 和 Vue 2.7+，且对 SSR（如 Nuxt）友好。

常见功能分类（举例）

  • 状态管理：useStorage、useLocalStorage、useSessionStorage、useRefHistory（撤销/重做）
  • 传感器/设备：useMouse、useWindowSize、useNetwork、useOnline、useGeolocation
  • 浏览器 API：useClipboard、useDark、useTitle、useFullscreen、useEventListener
  • DOM / 交互：useElementSize、useElementVisibility、onClickOutside
  • 时间与性能：useIntervalFn、useTimeoutFn、useDebounceFn、useThrottleFn

基础使用方式

npm install @vueuse/core
import { useMouse, useWindowSize, useDebounceFn } from '@vueuse/core'

const { x, y } = useMouse()
const { width, height } = useWindowSize()

const debouncedSearch = useDebounceFn(searchHandler, 300)

官方文档