VueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。
它有几十个解决方案，适用于常见的开发者用例，如跟踪Ref变化、检测元素可见性、简化常见的Vue模式、键盘/鼠标输入等。这是一个真正节省开发时间的好方法，因为你不必自己添加所有这些标准功能。
我喜欢VueUse库，因为它在决定提供哪些实用工具时真正把开发者放在第一位，而且它是一个维护良好的库，因为它与Vue的当前版本保持同步。
VueUse 有哪些实用程序？ 如果你想看到每一个实用程序的完整列表，我绝对建议你去看看官方文档。但总结一下，VueUse中有9种类型的函数。

1. Animation——包含易于使用的过渡、超时和计时功能。
2. Browser——可用于不同的屏幕控制、剪贴板、偏好等。
3. Component——提供了不同组件方法的简写。
4. Formatters——提供响应时间格式化功能。
5. Sensors——用来监听不同的DOM事件、输入事件和网络事件。
6. State——管理用户状态（全局、本地存储、会话存储）。
7. Utility——不同的实用函数，如 getter、条件、引用同步等。
8. Watch——更多高级类型的观察器，如可暂停的观察器、退避的观察器和条件观察器。
9. Misc——不同类型的事件、WebSockets和web workers 的功能

这些类别中的大多数都包含几个不同的功能，所以VueUse对于你的使用情况来说是很灵活的，可以作为一个很好的地方来快速开始构建Vue应用程序。
在本教程中，我们将看一下5个不同的VueUse函数，这样你就可以了解在这个库中工作是多么容易。
但首先，让我们将其添加到Vue项目中！
将 VueUse 安装到你的 Vue 项目中 VueUse的最大特点之一是，它只用一个软件包就能同时兼容Vue 2和Vue 3！
安装VueUse有两种选择npm或CDN

npm i @vueuse/core # yarn add @vueuse/core

我建议使用NPM，因为它使用法更容易理解，但如果我们使用CDN，VueUse将在应用程序中通过 window.VueUse 访问。
对于NPM的安装，所有的功能都可以通过使用标准的对象重构从 @vueuse/core 中导入，像这样访问。

import { useRefHistory } from '@vueuse/core'

好了，现在我们已经安装了VueUse，让我们在应用程序中使用它！
useRefHistory 跟踪响应式数据的更改 useRefHistory 跟踪对Ref所做的每一个改变，并将其存储在一个数组中。这使我们能够轻松地为我们的应用程序提供撤销和重做功能。
让我们看一个示例，其中我们正在构建一个我们希望能够撤消的文本区域。
第一步是在不使用 VueUse 的情况下创建我们的基本组件——使用 ref、textarea 和用于撤消和重做的按钮。