首頁  >  文章  >  web前端  >  分享五個好用的VueUse函數,一起用起來吧!

分享五個好用的VueUse函數,一起用起來吧!

醉折花枝作酒筹
醉折花枝作酒筹轉載
2021-08-13 17:39:163008瀏覽

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 &#39;@vueuse/core&#39;

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 &#39;vue&#39;
const text = ref(&#39;&#39;)
</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 &#39;@vueuse/core&#39;

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

每當我們的ref發生變化,更新history屬性時,就會觸發一個監聽器。

為了看看底層做了什麼,我們把 history 內容印出來。並在單擊對應按鈕時呼叫 undo 和redo函數。