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

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

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

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

#一、vueuse：  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 久矣！

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

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

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

• 它不用註冊 Mutation! Action 就能直接操作 state。

• 它支援透過外掛程式提升 Pinia 的能力。

• 良好的 Typescript 支援。

• 伺服器端渲染支援。

定義：

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

使用：

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

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

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

##也得到了官方的認可

因此，Pinia

確實值得一學，在

2022 年也是非常有潛力大火的框架。 三、Element Plus

: 真正的

ElementUI 3.0

為啥ElementUI 2.x 的正統續作叫Element Plus

, 而不叫

Element 3.0

？

這是個李逵和李鬼的故事，懂的都懂。

官網網址：https://element-plus.gitee.io/zh-CN/說ElementUI 2. x 是vue 2.x

版本裡最為著名與傳播最廣的###UI元件庫###，我想業內大部分人應該都是認可的。 ###

現在vue3 也成為vue 的正式版本，隨著vue3 用戶的增多，Element Plus 也必然會迎來一次高速成長期。

Element Plus 有什麼優點呢？

• API 和 Element UI 2.x 高度一致，遷移程式碼和學習成本小。

• 核心實作 和 Element UI 2.x 高度相似，例如我介紹過的 PopupManager 等。

• 使用 css var 的樣式定義模式，樣式切換更絲滑。

• 值得信任的維修團隊。

可以大膽預測，Element-Plus 2022年仍會爆火。

四、Navie UI：尤某親自推薦的組件庫

#非KPI作品，風格討喜，組件完備，文風親切。

官方網站：https://www.naiveui.com/zh-CN/os-theme

雖然只在一些小型項目及Demo 中使用了Navie UI，但這款專案確實是實實在在的討喜。

它來自一個名叫「圖森」公司自用框架的開源，這公司名和這框架名可以說非常有梗了。

來自“圖森”的“Navie UI”，emmm....

#讓我們來簡單列舉此框架的亮點：

• 元件完善和豐富程度都非常可觀。

• 換膚和主題支持非常棒。

• TypeScript 優秀的支援。 TS YYDS！

我個人是非常喜歡這個專案的，不過它能走多遠確實需要時間的驗證。

希望它在 2022 能夠被更多人喜歡和使用！

五、Nuxt：SSR 全村的希望

單頁應用萬般好，載入慢，SEO得分少。

在React 和Vue 兩家獨大（Angular:"我呢？"）的當前，我們想要一個web 單頁應用程式（SPA），實在過於簡單。
但也引發了其他的問題：單頁應用程式雖然體驗極好，但 SEO 確實是短板。

因此，SSR 應運而生。

React 有了 Next，Vue 也有了 Nuxt。

不過，每一個立志想做好「SSR」的兄弟，可能都得有足夠清醒的認知：這是個深坑，清謹慎前行。

2022年，SSR 依然會是眾多公司的強需求，vue 目前在SSR 這塊還沒出現比# Nuxt 更能打的對手，因此依然可以相信它在本年的表現。

六、vite：快就是好

webpack 確實好，但它開發時就是慢。

官方網站：https://vitejs.cn/

Vite(讀音類似[weɪt]，法語，快的意思) 是由原生ES Module 驅動的Web 開發建置工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。

2022 誰會是前端建構界的王者？我的回答是「webpack」。 （vite: 你在我的地盤誇別人？）

但 webpack 的市場一定會被 vite 蠶食掉一大塊，尤其是中小型應用。

為什麼？就是因為「快」！

webpack 5 最吸引人的地方是"模組聯邦"，它奠定了 webpack 5 在微應用程式場景下的領先性。

但不是所有人都需要「模組聯邦」啊，有很多企業的需求就是 SPA，就是短平快，就是上手就能幹。

尤某說：vue-cli@next 會基於 vite。 （自己體會...）

vite 的成長還遠遠沒達到巔峰，2022值得期待！

更多程式相關知識，請造訪：程式設計入門！ ！

以上是2022年值得了解的6款 vue 庫【「爆」】的詳細內容。更多資訊請關注PHP中文網其他相關文章！