摘要：一款基於Vue組合式API的函數工具集。
本文分享自華爲雲社區《vueuse:我不許身爲vuer的前端,你的工具集只有lodash!》，作者： 前端要摸魚 。
vueuse 是什麼?
一款基於Vue組合式API的函數工具集。
以上是官方網站關於它的定義。
首先，它基於Vue Composition Api (組合式API)，只有在支持組合式API的環境下，纔可以正常使用它；什麼是組合式API?
然後，它是一款函數工具集（可類比爲lodash.js/ramda.js）;
簡單來說，這是一個能讓你更早下班的工具庫。
vueuse 開源嗎？現狀如何？
當然開源！github/vueuse
star數：6.3K
社區活躍度：社區非常活躍，截止2021年11月，一直有mr被合入主線；
被引用情況：截止2021年11月13日，npm上可查詢到依賴它的庫就有172個，其中包括著名UI庫：Element-Plus
那位常年被調侃“懂個錘子Vue”的著名開源作者Evan You也是此庫的金牌贊助商；
安裝 vueuse
npm i @vueuse/core // or yarn add @vueuse/core
注： VueUse 藉助 vue-demi 的強大功能,可以在一個包中同時適用於 Vue 2 和 3！
Vue 3 Demo:
使用vite: https://github.com/vueuse/vueuse-vite-starter
使用Webpack: https://github.com/vueuse/vueuse-vue3-example
Vue 2 Demo: Vue CLI
使用Vue CLI: https://github.com/vueuse/vueuse-vue2-example
另外，要注意庫的版本：
從v6.0版本起，vue3 需要 vue >= v3.2;
vue2 需要依賴@vue/composition-api>@vue/composition >= v1.1
vueuse 能做什麼？
能做的那可太多了，但總體上分爲以下幾個類別提供工具函數：
- 動畫
- 瀏覽器
- 組件
- 格式化
- 傳感器
- State(狀態機)
- 公共方法
- 監聽
- 雜項
這麼列了一遍，估計你還是很懵，但因爲方法實在太多，也不可能一個個都列出來。
那我就舉幾個有代表性的例子，帶你快速理解這些方法大概是做什麼的，有什麼特點；
例子1: useMouse
<template> <div id="app"> <h3>Mouse: {{x}} x {{y}}</h3> </div> </template> <script setup lang="ts"> import { useMouse } from '@vueuse/core' const { x, y } = useMouse() </script>
效果：
Wooooow~~~
這可太簡單易用了！親人們，給我買！！（誤）
經過源碼閱讀，我們可以發現，這短短的一個方法，至少做了以下這些事：
- 創建了x和y這兩個響應式對象（Ref）;
- 給window添加了鼠標事件監聽，將鼠標的座標實時賦給x，y;（並且還做了移動端兼容）
如果這些邏輯放到頁面裏，至少需要6行代碼，這些代碼後期都會增加維護人員理解頁面的成本；
而現在，你只需要一行代碼；
除此之外，該方法還有組件式用法，適合更熱愛標籤的盆友
<UseMouse v-slot="{ x, y }"> x: {{ x }} y: {{ y }} </UseMouse>
例子2: useInterval
顧名思義，這個方法是對延時重複調用能力的封裝；
<script setup lang="ts"> import { useInterval } from '.' const { counter, pause, resume } = useInterval(200, { controls: true }) // counter 一個 Ref 對象，它是響應式的，counter.value等於已經計數的次數 // pause() 暫停 // resume() 恢復 </script> <template> <div id="APP"> <p>Interval fired: {{ counter }}</p> </div> </template>
看看效果：
是不是很好用？相比手寫setInterval更爲便捷。
如果徒手實現這樣一個套方法，多少行暫且不說，我們需要在業務中寫下大量的邏輯代碼。
而衆所周知：
寫的代碼越多，出Bug的可能性越大，維護和理解的難度就越高。
從這個角度看，這個庫確實是一個合格的函數工具集；
例子3：useVModel
這是一個給經常封裝組件的小夥伴的大好利器。
先創建一個組件：Test.vue
<template> <div> name: <input v-model="_name"/> age: <input v-model="_age"/> sex: <input v-model="_sex"/> </div> </template> <script lang="ts" setup> import { useVModel } from '@vueuse/core' const props = defineProps({ name: String, age: String, sex: String }) const emit = defineEmits(['update:name', 'update:age', 'update:sex']) const _name = useVModel(props, 'name', emit) const _age = useVModel(props, 'age', emit) const _sex = useVModel(props, 'sex', emit) </script>
接着，在index.vue中使用它
<template>
<div>
<Test
v-model:name="formData.name"
v-model:age="formData.age"
v-model:sex="formData.sex"
></Test>
{{ formData }}
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue-demi';
import Test from './Test.vue'
const formData = reactive({
name: 'lily',
age: '8',
sex: 'boy'
})
</script>
對於有組件封裝需求的朋友，這個方法牆裂推薦！
不用再爲了單項數據流的組件封裝，而寫在組件內寫冗餘的代碼了。直接將useVModel返回的數據作爲響應式對象用即可。
這可太得勁兒了~~