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

華為雲開發者社群發表於2022-01-17
前端Vue
摘要：一款基於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返回的資料作為響應式物件用即可。

這可太得勁兒了~~

 

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

相關文章