作者：Matt Maribojoc 译者：前端小智 来源：medium
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
VueUse 是 Anthony Fu 大佬的一个开源项目，它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。
它有几十个用于常见开发人员用例的解决方案，如跟踪ref更改，检测元素可见性，简化常见Vue模式，键盘/鼠标输入等。 这是真正节省开发时间的好方法，因为我们不必自己亲手添加所有这些标准功能，拿来主义，用就对了(再次感谢大佬的付出)。
我喜欢VueUse库，因为它在决定提供哪些实用工具时真正把开发者放在第一位，而且它是一个维护良好的库，因为它与Vue的当前版本保持同步。
VueUse 有哪些实用方法？如果你想看到每一个实用程序的完整列表，建议去看看官方文档。但总结一下，VueUse 中有9种类型的函数。
-
Animation(动画) - 包含易于使用的过渡、超时和计时功能
-
Browser (浏览器) - 可以用于不同的屏幕控件、剪贴板、首选项等等
-
Component (组件) - 为不同的组件方法提供简写
-
Sensors (传感器)- 用来监听不同的DOM事件、输入事件和网络事件
-
State (状态) - 管理用户状态（全局，本地存储，会话存储）
-
Utility （实用方法）–不同的实用方法，如getters、conditionals、ref synchronization等。
-
Watch --更高级的观察器类型，如可暂停的观察器、放弃的观察器和条件观察器
-
其它 - 事件、WebSockets和 Web workers 的不同类型的功能
VueUse 的最大特点之一是，它只用一个包就能兼容 Vue2 和 Vue3!
安装VueUse有两种选择：npm或CDN
npm i @vueuse/core # yarn add @vueuse/core
推荐使用NPM，因为它更容易理解，但如果我们使用CDN, 可能通过window.VueUse来访问。
使用 npm，可以通过解构的方式来获得想要的方法：
import { useRefHistory } from '@vueuse/core'
useRefHistory 跟踪响应式数据的变化
useRefHistory跟踪对ref所做的每一个改变，并将其存储在一个数组中。这样我们能够轻松为应用程序提供撤销和重做功能。
来看一个示例，在该示例中，我们做一个能够撤销的文本区域
第一步是在没有 VueUse 的情况下创建我们的基本组件–使用ref、textarea、以及用于撤销和重做的按钮。
UndoRedo
接着，导入useRefHistory，然后通过useRefHistory从text中提取history、undo和redo属性。
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)
每当我们的ref发生变化，更新history属性时，就会触发一个监听器。
为了看看底层做了什么，我们把history内容打印出来。并在单击相应按钮时调用undo和redo函数。
Undo Redo
- {{ entry }}
直接，跑起来，效果如下：
还有不同的选项，为这个功能增加更多的功能。例如，我们可以深入追踪 reactive 对象，并像这样限制history记录的数量。
const { history, undo, redo } = useRefHistory(text, {
deep: true,
capacity: 10,
})
onClickOutside 关闭 modal
onClickOutside检测在一个元素之外的任何点击。根据我的经验，这个功能最常见的使用情况是关闭任何模态或弹出窗口。
通常，我们希望我们的模态屏蔽网页的其余部分，以吸引用户的注意和限制错误。然而，如果他们确实点击了模态之外，我们希望它关闭。
要做到这一点，只有两个步骤。
- 为要检测的元素创建一个模板引用
- 使用这个模板ref运行onClickOutside
这是一个简单的组件，使用onClickOutside弹出窗口。
Open PopupLorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?
运行后，对应的值会更新：
我们还可以为我们的 Intersection Observer 指定更多的选项，比如改变它的根元素、边距（计算交叉点时对根的边界框的偏移）和阈值水平。
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
},
{
// root, rootMargin, threshold, window
// full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts
threshold: 0.5,
}
)
同样重要的是，这个方法返回一个stop函数，我们可以调用这个函数来停止观察交叉点。如果我们只想追踪一个元素在屏幕上第一次可见的时候，这就特别有用。
在这段代码中，一旦targetIsVisible被设置为true，observer 就会停止，即使我们滚动离开目标元素，我们的值也会保持为true。
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
if (isIntersecting) {
stop()
}
},
)
使用 useTransition 做个数字加载动画
useTransition是整个VueUse库中我最喜欢的函数之一。它允许我们只用一行就能顺利地在数值之间进行过渡。
如果使用useTransition做一个下面这样的效果，要怎么做呢?
我们可以通过三个步骤来做到这一点。
-
初始化一个ref变量count，初始值为0
-
使用useTransition创建一个变量output
-
改变 count 的值
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const count = ref(0)
const output = useTransition(count , {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
count.value = 5000
然后在 template 中显示output的值：
Join over
{{ Math.round(output) }}+
Developers
运行结果：
我们还可以使用useTransition转换整个数字数组。 使用位置或颜色时，这非常有用。 使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。
COLOR CHANGING
这不是VueUse的完整指南。这些只是我平常比较常用的函数，还有很多好用的函数，大家可以自行到官网去学习使用。
~完，我去刷碗了，周末不刷碗，晚上跪榴莲。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://learvue.co/2021/07/5-vueuse-library-functions-that-can-speed-up-development/
交流有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
