Day_24: 让 Vite 来开启你的Vue 之 VueUse

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。

今天听的是 卢广仲的大人中..(直到现在我还是在听这首歌)

其中我很喜欢 这几句..

『 太常失败 好想成功 车水马龙里我抓着 支持我活着的快乐 』