vue3的实用工具库@vueuse/core

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 >