Hi Dai Gei Ho~ 我是 Winnie ～ 在今天文章中，我們要來介紹的是VueUse 。

什麼是VueUse

VueUse 作者為 Anthony Fu ，是一個主要以 Composition API 為基底的 函式工具庫，其中 VueUse 主要特色可以分為以下幾點：

• Vue 2 和 Vue 3 都支援
• 採取 Tree Shaking 結構，只會打包引入的程式碼
• 支持各種套件
• 可配置事件過濾器和目標

主要功能

而在 VueUse中 封裝了很多常用的功能， 像是 追蹤ref狀態的更改，鍵盤/滑鼠輸入事件等，主要可分為以下九大類型：

• Animation(動畫)
• Browser (瀏覽器)
• Component (元件)
• Formatters (格式)
• Misc(各式各樣的)
• Sensors (傳感器)
• State(狀態)
• Utility(實用方法)
• Watch(觀察)

稍後 會在實作中其中一個功能出來介紹，剩下的就不一一介紹了，有興趣的捧油們可以到官方文件細細品嚐 > VueUse。

如何使用

NPM 或 yarn :

 npm i @vueuse/core 
 或
 yarn add @vueuse/core

CDN引入:

這邊注意 shared 一定要在前面

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

如果使用CDN引入方式，需通過 window.VueUse來使用。

以 複製文字 為例：

<script setup> //setup語法糖

    import { useClipboard } from '@vueuse/core'; //只需要引入所使用到的  API
    import { ref } from 'vue'
      setup() {
        const input = ref('我是 Winnie')
        const { 
        text, //複製的值
        isSupported, //瀏覽器有無支援
        copy, //方法
        copied 
        } = useClipboard() 
        
</script>

預覽:

完整程式碼連結: demo

以上就是關於 VueUse 的基礎介紹，如任何有問題歡迎各位的指教，謝謝大家。

--- 想給以後的自己看的 ---

因為好像剩沒幾篇了，所以想在剩下的幾天文章的最後來記錄下每天的自己 ：

最近覺得自己真是感性，常常一天只聽一首歌，偶爾聽一聽還會眼眶濕濕的，才發現原來我已經到了那種聽歌會無意識有情緒的年紀了XD。

今天聽的是 盧廣仲的大人中..(直到現在我還是在聽這首歌)

其中我很喜歡 這幾句..

『 太常失敗 好想成功 車水馬龍裡我抓著 支持我活著的快樂 』