摘要：一款基于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回傳的資料作為回應式物件用即可，
這可太得勁兒了~~
點擊關注，第一時間了解華為云新鮮技術~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/413883.html
標籤：其他
下一篇：微軟實用工具錦集