VueUse是Anthony Fu大佬的一個開源項目，它為Vue的開發(fā)者提供了大量用于Vue2和Vue3的基本Composition API實用工具函數。

它有幾十個用于常見開發(fā)人員用例的解決方案，如跟蹤ref更改，檢測元素可見性，簡化常見Vue模式，鍵盤/鼠標輸入等。 這是真正節(jié)省開發(fā)時間的好方法，因為我們不必自己親手添加所有這些標準功能，拿來主義，用就對了(再次感謝大佬的付出)。

我喜歡VueUse庫，因為它在決定提供哪些實用工具時真正把開發(fā)者放在第一位，而且它是一個維護良好的庫，因為它與Vue的當前版本保持同步。

VueUse 有哪些實用方法？

如果你想看到每一個實用程序的完整列表，建議去看看官方文檔。但總結一下，VueUse 中有9種類型的函數。

• Animation(動畫) – 包含易于使用的過渡、超時和計時功能

• Browser (瀏覽器) – 可以用于不同的屏幕控件、剪貼板、首選項等等

• Component (組件) – 為不同的組件方法提供簡寫

• Sensors (傳感器)- 用來監(jiān)聽不同的DOM事件、輸入事件和網絡事件

• State (狀態(tài)) – 管理用戶狀態(tài)（全局，本地存儲，會話存儲）

• 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 所做的每一個改變，并將其存儲在一個數組中。這樣我們能夠輕松為應用程序提供撤銷和重做功能。

來看一個示例，在該示例中，我們做一個能夠撤銷的文本區(qū)域

第一步是在沒有 VueUse 的情況下創(chuàng)建我們的基本組件–使用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發(fā)生變化，更新history屬性時，就會觸發(fā)一個監(jiān)聽器。

為了看看底層做了什么，我們把 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>

還有不同的選項，為這個功能增加