D32. 响应式工具库 VueUse

2.1. 🌟 VueUse 将常见功能封装为响应式数据

VueUse 是 Vue 的「瑞士军刀」，它把原本需要手动处理的复杂逻辑（如浏览器交互、传感器数据、状态管理）封装成可复用的组合式函数，让数据自动响应变化。

核心特性

• 响应式封装：将非响应式API（如 window.innerWidth）转为响应式数据
• 按需导入：仅引入需要的函数，避免冗余打包
• 跨版本兼容：同时支持 Vue 2 和 Vue 3

<script setup>
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize() // 自动响应窗口尺寸变化
</script>

TIP

安装命令：npm install @vueuse/core

2.2. 🌟 VueUse 用例介绍

2.2.1. 🔍 获取 BOM 相关数据

用例：实时获取窗口尺寸

<template>
  <div>
    <p>窗口宽度：{{ width }}px</p>
    <p>窗口高度：{{ height }}px</p>
  </div>
</template>

<script setup>
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()
</script>

用例：监听页面可见性

<template>
  <div>
    <p>页面状态：{{ visibility }}</p>
  </div>
</template>

<script setup>
import { useDocumentVisibility } from '@vueuse/core'

const visibility = useDocumentVisibility() // 返回 'visible'/'hidden'
</script>

2.2.2. 🤖 获取交互状态

用例：追踪鼠标位置

<template>
  <div>
    <p>鼠标X坐标：{{ x }}</p>
    <p>鼠标Y坐标：{{ y }}</p>
  </div>
</template>

<script setup>
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse() // 自动更新坐标
</script>

用例：防抖节流操作

import { useThrottleFn } from '@vueuse/core'

const expensiveOperation = useThrottleFn(() => {
  console.log('每隔500ms执行一次')
}, 500)

2.2.3. 🗄️ 集成 localStorage 存储数据

用例：持久化表单数据

<template>
  <input v-model="storedValue" placeholder="输入内容" />
</template>

<script setup>
import { useStorage } from '@vueuse/core'

const storedValue = useStorage('my-key', '默认值') // 自动同步localStorage
</script>

用例：带过期时间的缓存

import { useLocalStorage } from '@vueuse/core'

const cachedData = useLocalStorage(
  'cache-key',
  '初始值',
  {
    expires: 60 * 60 * 24 // 1天后过期
  }
)

WARNING

直接操作 localStorage 需要手动处理类型转换，VueUse 自动处理为响应式数据！

知识回顾

1. VueUse 核心思想：用组合式函数封装高频功能，实现「一行代码解决复杂逻辑」
2. 关键函数分类：
   • BOM 监控：useWindowSize、useDocumentVisibility
   • 交互状态：useMouse、useClickAway
   • 数据持久化：useStorage、useSessionStorage
3. 响应式优势：无需手动触发更新，数据变化自动驱动视图刷新

课后练习

1. 单选：以下哪个函数用于监听窗口尺寸变化？

   • A. useMouse
   • B. useWindowSize
   • C. useStorage
   • D. useDocumentVisibility

2. 填空：使用 useThrottleFn 函数时，第二个参数表示______。

3. 简答：为什么 VueUse 的 useStorage 函数比直接操作 localStorage 更方便？

参考答案

1. B
2. 节流时间间隔（单位毫秒）
3. 自动处理数据类型转换、响应式更新，且支持过期时间等高级配置。

扩展阅读

• VueUse 官方文档
• 用例实战：拖拽组件
• 响应式监听元素可见性