2022年值得了解的6款 vue 庫【「爆」】-Vue.js-PHP中文網

這篇文章給大家分享 6款值得了解的 vue 相關的庫，這6款庫在2022年極有可能會“爆火”，快來收藏了解吧，希望對大家有所幫助！

2022年值得了解的6款 vue 庫【「爆」】

2022 年前端圈又會蹦出什麼新黑馬呢？這個無人知曉。

但根據我個人理解，下面這6款 和vue 相關的庫，在2022 年極有可能會「爆火”，或“繼續爆火”！讓我們趕緊學起來！【相關推薦：vue.js影片教學】

#一、`vueuse`： vue開發者專屬工具集！

2022年值得了解的6款 vue 庫【「爆」】

官網位址：https://vueuse.org/

#一款基於Vue組合式API的函數工具集。

在任何可以使用Vue Composition Api (組合式API) 的環境下，你可以透過安裝vueuse 工具庫，來提升你的開發效率（沒錯，vue2.x 和vue3.x 都能玩）。

可以理解為 vue 專屬的 lodash!

它都有哪些工具集呢？那太多了，只有你想不到，沒有你用不到！

整體上分為以下幾個類別提供工具函數：

動畫
#瀏覽器
元件
格式化
感測器
State(狀態機)
公用方法
監聽
雜項

以我自己為例，useTemplateRefsList 就是我最近在實際專案開發中大量使用的超級實用的方法。

useTemplateRefsList： 這個方法可以在vue3 元件式api 中幫助你快速綁定for 迴圈中的元件ref。比自己實現考慮得更完備。

<script setup>
import { onUpdated } from &#39;vue&#39;
import { useTemplateRefsList } from &#39;@vueuse/core&#39;

const refs = useTemplateRefsList<HTMLDivElement>() // 用来存储元素 ref 的数组

onUpdated(() => {
  console.log(refs)
})
</script>
<template>
  <!-- 在这里绑定 ref -->
  <div v-for="i of 5" :key="i" :ref="refs.set"></div>
</template>

登入後複製

另外，還有各種形形色色的好用工具，如useVModel、useInterval, useCssVar 等等，都等著大家去發掘。

簡單來說，這是一個能讓你更早下班的工具庫，早用早下班。

二、`Pinia`：更好用的`vue store` 庫( `vuex` 競品)

天下苦vuex 久矣！

2022年值得了解的6款 vue 庫【「爆」】

官網網址：https://pinia.vuejs.org/

想當年，vuex 頂著“官方欽定，尤老祖親傳」的名聲獨佔vue 狀態管理的王座，但太多太多的人在使用時都親身感受到了其設計上的「複雜」與「不便」。
我隨手畫了個漫畫，表達我的感受：

2022年值得了解的6款 vue 庫【「爆」】

那麼，Pinia 到底有啥優勢呢？

它不用註冊 Mutation! Action 就能直接操作 state。
它支援透過外掛程式提升 Pinia 的能力。
良好的 Typescript 支援。
伺服器端渲染支援。

定義：

// stores/counter.js
import { defineStore } from &#39;pinia&#39;
export const useCounterStore = defineStore(&#39;counter&#39;, {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

登入後複製

使用：

import { useCounterStore } from &#39;@/stores/counter&#39;
export default {
  setup() {
    const counter = useCounterStore()
    counter.count++
    counter.$patch({ count: counter.count + 1 })
    counter.increment()
  },
}

登入後複製

看起來是不是比使用 vuex 要輕便一點？

據說，vuex 5.x 在API 的設計上也，也參考了Pinia 的設計思路，由此也能看見得Pinia

##也得到了官方的認可 2022年值得了解的6款 vue 庫【「爆」】