VueUse教程：常用函数、示例与技巧
VueUse 教程：常用函数、示例与技巧
VueUse 是一个基于 Vue 3 Composition API 的实用函数库，它提供了大量可重用的组件、函数和工具，旨在帮助开发者更轻松地构建 Vue 应用程序。VueUse 的函数涵盖了各种常见的开发场景，如状态管理、异步操作、DOM 操作、事件处理、浏览器 API 交互等等。通过使用 VueUse，你可以减少重复代码，提高开发效率，并使你的代码更具可读性和可维护性。
本文将深入探讨 VueUse 的一些常用函数，提供详细的示例和技巧，帮助你更好地理解和应用 VueUse。
安装
在使用 VueUse 之前，你需要先安装它：
bash
npm install @vueuse/core
或者使用 yarn：
bash
yarn add @vueuse/core
核心概念：可组合函数 (Composable Functions)
VueUse 的核心是“可组合函数”，这是一种利用 Vue 3 Composition API 来封装和重用逻辑的模式。可组合函数通常以 use 开头，例如 useMouse、useFetch、useStorage 等。它们接受一些参数，并返回一个包含响应式状态和相关方法的对象。
这种模式的优点在于：
- 逻辑复用： 将通用的逻辑提取到可组合函数中，避免在多个组件中重复编写相同的代码。
- 响应式： 可组合函数返回的状态通常是响应式的，这意味着当状态发生变化时，相关的组件会自动更新。
- 组合性： 可以将多个可组合函数组合在一起，构建更复杂的功能。
- 可测试性： 可组合函数更容易进行单元测试，因为它们是独立的、可重用的单元。
常用函数分类及示例
VueUse 提供了非常多的实用函数，为了方便查阅，这里将它们进行分类，并挑选一些常用的进行详细介绍。
1. 状态管理 (State)
-
useRefHistory： 记录ref值的历史记录，可以进行撤销/重做操作。```vue
Current Value: {{ count }}
- {{ item.snapshot }} (timestamp: {{ item.timestamp }})
```
这个函数可以用于比如撤销输入操作。 -
useLocalStorage/useSessionStorage： 将数据存储在浏览器的 LocalStorage 或 SessionStorage 中，并保持响应式。```vue
Stored Name: {{ storedName }}
``` -
useStorage:useLocalStorage和useSessionStorage的通用版本。允许你轻松地在localStorage,sessionStorage, 或其他任何实现了Storage接口的对象中存储和同步数据。 -
useAsyncState: 管理异步操作的状态（pending, data, error）。```vue
Loading...Error: {{ error.message }}{{ data }}
```2. 浏览器 API (Browser)
-
useMouse： 跟踪鼠标的位置。```vue
Mouse X: {{ x }}
Mouse Y: {{ y }}
``` -
useWindowSize： 跟踪浏览器窗口的大小。```vue
Window Width: {{ width }}
Window Height: {{ height }}
``` -
useMediaQuery： 监听媒体查询的变化。```vue
Mobile Device
Desktop Device
``` -
useClipboard： 提供对剪贴板的访问，可以复制和读取文本。```vue
Copied: {{ copied }}
Clipboard Text: {{ textFromClipboard }}
``navigator.clipboard.readText()
**重要提示:**需要用户授权（通常是通过点击触发）。 直接在setup` 中调用可能会失败，因为它没有用户交互。 确保在用户触发的事件（如点击事件）中调用它。 -
useGeolocation: 获取用户的地理位置信息。
```vue
Latitude: {{ coords.latitude }}, Longitude: {{ coords.longitude }}
Geolocation is not supported
* **`useNetwork`**: 获取网络连接状态信息。vue
Online: {{ isOnline ? 'Yes' : 'No' }}
Network Type: {{ type }}
* **`useBattery`**: 获取设备电池状态信息 (充电状态, 电量等级)。vue
Charging: {{ charging ? 'Yes' : 'No' }}
Battery Level: {{ level * 100 }}%
```
3. DOM 操作 (DOM)
-
useElementSize： 跟踪 DOM 元素的大小。```vue
Element Width: {{ width }}
Element Height: {{ height }}
``` -
useScroll： 跟踪元素的滚动位置。```vue
Scrollable ContentScroll X: {{ x }}
Scroll Y: {{ y }}
``useDraggable`**: 使 DOM 元素可拖动。
* **``vuetranslate(${x}px, ${y}px)` , backgroundColor: 'lightblue'}">
<template>
<div ref="el" :style="{ transform:
Drag me
```
可以添加一些style使组件更美观。
4. 事件处理 (Event)
-
useEventListener： 更方便地添加和移除事件监听器。```vue
``` -
useDebounceFn/useThrottleFn： 对函数进行防抖或节流处理。```vue
Debounced Input: {{ debouncedText }}
Throttled Input: {{ throttledText }}
```
5. 其他实用函数
-
useInterval/useTimeout： 类似于setInterval和setTimeout，但在组件卸载时会自动清除定时器。```vue
Counter: {{ counter }}
Timeout Message: {{ message }}
``` -
createGlobalState: 创建一个全局的、响应式的状态。
```js
// store.js
import { createGlobalState, useStorage } from '@vueuse/core'
export const useGlobalCounter = createGlobalState(
() => useStorage('global-counter', 0) // 也可以不使用 useStorage, 直接使用 ref(0)
)
vue
// ComponentA.vue
// ComponentB.vue
<template>
<p>Counter: {{ counter }}</p>
</template>
<script setup>
import { useGlobalCounter } from './store';
const counter = useGlobalCounter();
</script>
```
技巧与最佳实践
-
按需导入： 为了减少打包体积，只导入你需要的函数。
javascript
import { useMouse, useLocalStorage } from '@vueuse/core'; -
组合使用： 将多个可组合函数组合在一起，构建更复杂的功能。例如，你可以将
useFetch和useLocalStorage组合起来，实现数据的缓存。 -
自定义可组合函数： 如果 VueUse 没有提供你需要的函数，你可以根据自己的需求创建自定义的可组合函数。
-
理解响应式： 熟悉 Vue 3 的响应式系统，这对于理解和正确使用 VueUse 至关重要。
-
及时清理：对于一些需要清理的函数 (例如
useEventListener,useInterval,useTimeout)，VueUse 会在组件卸载时自动清理。但是如果你在setup函数外部使用了这些函数，或者有更复杂的清理逻辑，需要手动调用它们返回的stop或remove函数。 -
阅读文档: VueUse 有非常详尽的官方文档, 是学习和查阅的最佳资源。
总结
VueUse 是一个强大而实用的工具库，它极大地简化了 Vue 3 应用程序的开发。通过掌握 VueUse 的常用函数和技巧，你可以编写更简洁、更易维护的代码，并显著提高你的开发效率。希望本文能帮助你更好地理解和使用 VueUse。