1.什么是@vueuse/core
是一个基于 Vue Composition API 开发的实用工具库，旨在通过封装高频功能为可复用的组合式函数（Composables），简化 Vue 应用的开发流程。
- 提供 200+ 开箱即用的函数，覆盖状态管理、浏览器交互、传感器、网络请求等场景，例如useStorage（状态持久化）1、useMouse（鼠标追踪）1；
- 支持 Vue 2 和 Vue 3，并通过 @vueuse/components 扩展组件化能力2；
- 以类似 Vue 生态的 lodash 为定位，强调代码复用和开发效率2。
2.安装
npm安装
npm install @vueuse/core
使用yarn安装
yarn add @vueuse/core
3.功能模块分类
- useState：创建和管理局部状态。
- useStorage：在 localStorage 或 sessionStorage
中存储和同步状态。 - useMouse：获取鼠标位置。
- useWindowSize：获取窗口尺寸。
- useGeolocation：获取地理位置信息。
- useTitle：动态设置文档标题。
- useFavicon：动态设置网页的favicon。
- useFetch：进行 HTTP 请求。
- useWebSocket：使用 WebSocket 进行实时通信。
- useInterval：定时器。
- useTimeout：延时器。
- useTransition：处理过渡效果。
- useSpring：实现弹簧动画。
- useForm：处理表单状态和验证。
- useDebounce：防抖函数。
- useThrottle：节流函数。
4.使用实例
<script lang="ts" setup>
//导入工具库
import { useWindowSize, useMouse, useTitle, useStorage } from '@vueuse/core'// 获取窗口尺寸
const { width, height } = useWindowSize()// 获取鼠标位置
const { x, y } = useMouse()// 动态设置页面标题
const title = ref('VueUse Example')
useTitle(title)// 使用 localStorage 存储数据,使用 useStorage 将输入框的值存储到 localStorage 中，并在页面刷新时保持数据。
const storedValue = useStorage('my-storage-key', '')</script >