都2022年了,你的前端工具集應該有vueuse

華為雲開發者社群發表於2022-01-17
摘要:一款基於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也是此庫的金牌贊助商;

都2022年了,你的前端工具集應該有vueuse

安裝 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>

效果:

useMouse.gif

 

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>

看看效果:

useInterval.gif

 

是不是很好用?相比手寫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.gif

 

 

 

 

 

 

 

 

對於有元件封裝需求的朋友,這個方法牆裂推薦!

不用再為了單項資料流的元件封裝,而寫在元件內寫冗餘的程式碼了。直接將useVModel返回的資料作為響應式物件用即可。

這可太得勁兒了~~

 

點選關注,第一時間瞭解華為雲新鮮技術~

相關文章