Vue Composition API

一个分享 技术 | 生活 | 社会 | 科技 | 经济 | 情感 的前端爱好者！VueUse 是一个基于 Vue Composition API 的实用工具函数集合，提供了超过 200 个开箱即用的组合式函数，帮助开发者更高效地构建 Vue 应用程序。它由 Vue 和 Vite 团队核心成员 Anthony Fu 创建，已成为 Vue 生态中最受欢迎的工具库之一。官方文档地址：

https://vueuse.org

https://mp.weixin.qq.com/s/xxgz0KZvFq7nAMRe81wcqg

一、核心特性轻量级与模块化：VueUse 采用原子化设计原则，每个函数都是独立的功能单元，支持按需引入，通过 Tree-shaking 优化打包体积。类型安全：全库使用 TypeScript 编写，提供完整的类型定义，开发体验丝滑流畅。跨平台支持：同时支持 Vue 2.7+ 和 Vue 3，兼容 Web、Electron、Nuxt 等多种环境。响应式设计：所有函数返回值都是 ref，与 Vue 响应式系统完美融合，可直接在模板中使用。

二、核心功能分类VueUse 将工具函数划分为 12 个功能类别：

三、安装与使用

1.安装：npm install @vueuse/core# 或yarn add @vueuse/core
2.按需引入：import { useLocalStorage, useMouse, useWindowSize } from '@vueuse/core'

四、常用函数示例

1. 状态持久化import { useLocalStorage } from '@vueuse/core'
// 自动同步到 localStorageconst theme = useLocalStorage('theme', 'light')theme.value = 'dark' // 自动保存到 localStorage

2. 浏览器窗口监听import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()// 响应式获取窗口尺寸，无需手动监听 resize 事件

3. 鼠标位置追踪import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()// 实时获取鼠标坐标

4. 网络请求import { useFetch } from '@vueuse/core'
const { data, error, isFetching } = useFetch('/api/user').json()// 自动处理 loading、错误、JSON 解析

5. 防抖搜索import { useDebounceFn } from '@vueuse/core'
const { debounce } = useDebounceFn(search, 500)

// 防抖后的函数，避免频繁触发总结VueUse 的核心价值在于：减少重复代码：避免手动封装常见功能提升开发效率：一行代码搞定复杂需求统一编码规范：团队协作更高效增强应用健壮性：自动处理边界情况性能优化：按需引入，Tree-shaking 友好VueUse 已成为现代 Vue 开发的”标准工具箱”，无论是状态管理、浏览器操作、网络请求还是动画交互，都能找到对应的解决方案。