大家新好呀，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓 ~

先來看看排行榜吧，知道一下目前最流行的項目都有哪些。

React 首次成為頭號 UI 框架，但如果我們考慮到 Vue.js 被分成了兩個倉庫(第二和第三版本)，實際上 Vue.js 才是第一名。

最大的變化是 Svelte 的崛起，它超越 Angular 占據(jù)第三位。

越來越多的工具或組件將 Svelte 納入目標(biāo)框架中(例如我們提到的 Vite)。

1. react

一個聲明性，高效且靈活的 JavaScript 庫，用于構(gòu)建用戶界面。

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，當(dāng)數(shù)據(jù)改變時 React 能有效地更新并正確地渲染組件。

以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試。

組件化

創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復(fù)雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。

一次學(xué)習(xí)，隨處編寫

無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。

React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動應(yīng)用。

https://github.com/facebook/reactReact 相關(guān)的項目可以看: 一個 React 技術(shù)揭秘的項目，自頂向下的 React 源碼分析。

2. vue

Vue.js 是一個漸進(jìn)式 JavaScript 框架，也是目前前端最流行的框架。

易用

已經(jīng)會了 HTML、CSS、JavaScript?即刻閱讀指南開始構(gòu)建應(yīng)用!

靈活

不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小
• 超快虛擬 DOM
• 最省心的優(yōu)化

https://github.com/vuejs/vueVue 相關(guān)的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目和 Vue3 的學(xué)習(xí)教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實戰(zhàn)項目 ，你會找到 Vue 的學(xué)習(xí)寶藏庫。

3. svelte

Svelte 是一個前端 UI 框架。

特性：

• 解決網(wǎng)站的臃腫危機(jī)。Svelte 將你的模板變成快速、輕量級的 vanilla JavaScript。
• 簡單易用。使用你掌握的語言，從可組合、易寫的模塊中構(gòu)建應(yīng)用。
• 快速而又堅固。編譯時靜態(tài)分析確保瀏覽器不再需要更多的工作。

https://github.com/sveltejs/svelte

4. angular

AngularJS 是一個應(yīng)用設(shè)計框架與開發(fā)平臺，用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用，通過新的屬性和表達(dá)式擴(kuò)展了 HTML，實現(xiàn)一套框架，多種平臺，移動端和桌面端。

AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。

https://github.com/angular/angular

5. solid

用于構(gòu)建用戶界面的聲明式、高效且靈活的 JavaScript 庫。

它把 React Vue 的精華給吸取過來了，jsx，響應(yīng)式。

Solid 為什么性能這么快，主要三個方面：

• 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法
• 響應(yīng)式原理，精準(zhǔn)更新對應(yīng)的值
• 提前編譯，更小的包體積，尺寸小

https://github.com/solidjs/solid

6. alpine

Alpine.js 通過很低的成本提供了與 Vue 或 React 這類大型框架相近的響應(yīng)式和聲明式特性。

你可以繼續(xù)操作 DOM，并在需要的時候使用 Alpine.js。

可以理解為 JavaScript 版本的 Tailwind。

Alpine 的優(yōu)勢在于 DOM 操作的簡便性，例如：

• 在某些條件下顯示和隱藏 DOM 節(jié)點，
• 綁定用戶輸入，
• 監(jiān)聽事件并相應(yīng)地更改UI，

你還可以使用 Alpine.js 來模板化數(shù)據(jù)是否可以在 JSON 中使用。

https://github.com/alpinejs/alpine

7. vue-next

易用

• 已經(jīng)會了 HTML、CSS、JavaScript?即刻閱讀指南開始構(gòu)建應(yīng)用!

靈活

• 不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小
• 超快虛擬 DOM
• 最省心的優(yōu)化

https://github.com/vuejs/core

8. petite-vue

尤雨溪發(fā)布了一款針對漸進(jìn)增強(qiáng)(progressive enhancement)進(jìn)行優(yōu)化的 Vue 發(fā)行版——petite-vue，大小僅有約 5kb。

與標(biāo)準(zhǔn) Vue 相比，petite-vue 具備相同的模板語法和響應(yīng)式心理模型，而二者的差別在于 petite-vue 專門針對在服務(wù)器框架渲染的一個現(xiàn)有 HTML 頁面上 “sprinkle” 少量交互進(jìn)行了優(yōu)化。

petite-vue 的亮點不僅在于體積小，還在于它能夠使用針對漸進(jìn)增強(qiáng)的最優(yōu)實現(xiàn)。

服務(wù)端渲染一般會有注水(hydrate)過程，而在 petite-vue 要做的事情比較簡單，被稱為"灑水(sprinkling)"

https://github.com/vuejs/petite-vue

9. lit

Lit 是一個基于 Web-Component 構(gòu)建的前端框架，前身基本可以理解為即 Polymer ， Lit 提供了如下具有競爭力的特性

基于 Web-Component 的更高層封裝，提供了現(xiàn)代前端開發(fā)習(xí)慣的響應(yīng)式數(shù)據(jù)，聲明式的模版，減少了web component的一部分樣板代碼.

小。運行時僅有5K

性能強(qiáng)悍。規(guī)避了 VDOM 的一些弊端，更新時僅處理 UI 中的異步部分(可以理解成僅處理響應(yīng)式的部分)

兼容性較好。因為 web-component 是 HTML 的原生能力，也就代表著 web-component 可以在任何使用 HTML 的地方使用，框架無關(guān)。

https://github.com/lit/lit

10. htmx

HTML 的高性能工具。

htmx 允許您使用屬性直接以 HTML 訪問 AJAX、WebSockets 和服務(wù)器發(fā)送的事件，因此您可以使用超文本的簡單性和強(qiáng)大功能構(gòu)建現(xiàn)代用戶界面

htmx 很小(~7k 最小 gz'd)，dependency-free，可擴(kuò)展，與 IE11 兼容。

https://github.com/bigskysoftware/htmx