站长资讯网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 安装到 Vue 项目中
VueUse 的最大特点之一是，它只用一个包就能兼容 Vue2 和 Vue3!
安装VueUse有两种选择：npm或 CDN
npm i @vueuse/core # yarn add @vueuse/core
<script src="https://unpkg.com/@vueuse/shared"></script> <script src="https://unpkg.com/@vueuse/core"></script>
推荐使用NPM，因为它更容易理解，但如果我们使用CDN, 可能通过 window.VueUse 来访问。
使用 npm，可以通过解构的方式来获得想要的方法：
import { useRefHistory } from '@vueuse/core'
useRefHistory 跟踪响应式数据的变化
useRefHistory跟踪对 ref 所做的每一个改变，并将其存储在一个数组中。这样我们能够轻松为应用程序提供撤销和重做功能。
来看一个示例，在该示例中，我们做一个能够撤销的文本区域
第一步是在没有 VueUse 的情况下创建我们的基本组件–使用ref、textarea、以及用于撤销和重做的按钮。
<template> <p> <button> Undo </button> <button> Redo </button> </p> <textarea v-model="text"/> </template> <script setup> import { ref } from 'vue' const text = ref('') </script> <style scoped> button { border: none; outline: none; margin-right: 10px; background-color: #2ecc71; color: white; padding: 5px 10px;; } </style>
接着，导入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函数。
<template> <p> <button @click="undo"> Undo </button> <button @click="redo"> Redo </button> </p> <textarea v-model="text"/> <ul> <li v-for="entry in history" :key="entry.timestamp"> {{ entry }} </li> </ul> </template> <script setup> import { ref } from 'vue' import { useRefHistory } from '@vueuse/core' const text = ref('') const { history, undo, redo } = useRefHistory(text) </script> <style scoped> button { border: none; outline: none; margin-right: 10px; background-color: #2ecc71; color: white; padding: 5px 10px;; } </style>
还有不同的选项，为这个功能增加
