技術文章 » 2022年值得了解的6款 vue 庫【「爆」】

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

2022-01-24 22:00:08
本篇文章給大家分享 6款 值得了解的 vue 相關的庫，這6款庫在2022年極有可能會「爆火」，快來收藏瞭解吧，希望對大家有所幫助！

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

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

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

1.png

官網地址：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 'vue'
import { useTemplateRefsList } from '@vueuse/core'

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 久矣！

2.png

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

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

3.png4.png

那麼，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 也得到了官方的認可

5.png

因此，Pinia 確實值得一學，在 2022 年也是非常有潛力大火的框架。

三、Element Plus: 真正的 ElementUI 3.0

為啥 ElementUI 2.x 的正統續作叫 Element Plus, 而不叫 Element 3.0 ？

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

6.png

官網地址：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作品，風格討喜，元件完備，文風親切。

7.png

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

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

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

來自「圖森」的「Navie UI」，emmm....

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

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

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

  • TypeScript 優秀的支援。TS YYDS！

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

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

五、Nuxt：SSR 全村的希望

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

8.png

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

因此，SSR 應運而生。

React 有了 Next，Vue 也就有了 Nuxt。

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

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

六、vite：快就是好

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

9.png

官方網站：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 庫【「爆」】的詳細內容，更多請關注TW511.COM其它相關文章！