目录

• VueUse 有哪些实用程序？
• 将 VueUse 安装到你的 Vue 项目中
• 1、useRefHistory 跟踪响应式数据的更改
• 2、onClickOutside 关闭模态
• 3、useVModel 简化了 v-model 绑定
• 4、使用InterpObserver 跟踪元素可见性
• 5、useTransition 在值之间缓和
• 最后的想法

VueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。

文章图片

它为常见的开发人员用例提供了数十种解决方案，例如，跟踪引用更改、检测元素可见性、简化常见的 Vue 模式、键盘/鼠标输入等。这是真正节省开发时间的好方法，因为你不必自己添加所有这些标准功能。
我喜欢 VueUse 库，因为在决定提供哪些实用程序时，它确实将开发人员放在首位，而且它是一个维护良好的库，因为它与当前版本的 Vue 保持同步。

VueUse 有哪些实用程序？ 如果你想查看每个实用程序的完整列表，我绝对建议你查看官方文档。但总结一下，VueUse 中有 9 种函数。

• 动画（Animation）—包含易于使用的过渡、超时和计时函数
• 浏览器（Browser）—可用于不同的屏幕控制、剪贴板、首选项等
• 组件（Component）— 为不同的组件方法提供简写
• Formatters – 提供反应时间格式化功能
• 传感器（Sensors ）—用于监听不同的 DOM 事件、输入事件和网络事件
• 状态（State ）—管理用户状态（全局、本地存储、会话存储）
• 实用程序（Utility）—不同的实用程序函数，如 getter、条件、引用同步等
• Watch —更高级的观察者类型，如可暂停观察者、去抖动观察者和条件观察者
• 杂项（Misc）— 事件、WebSockets 和 Web Worker 的不同类型的功能

这些类别中的大多数都包含几个不同的功能，因此 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使用标准对象解构导入它们来访问，如下所示：

// 从 VueUse 导入的示例import { useRefHistory } from '@vueuse/core'

好的。现在我们已经安装了 VueUse，让我们在我们的应用程序中使用它。

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