如今，市面上充斥著大量的優(yōu)秀前端框架，各有千秋。選擇哪個(gè)框架來學(xué)習(xí)，或者哪個(gè)框架最適合你的下一個(gè)項(xiàng)目，確實(shí)讓人難以抉擇。

本文將對(duì)比五個(gè)最流行的前端 JavaScript 框架，對(duì)它們的特性、工具、學(xué)習(xí)曲線以及其他優(yōu)缺點(diǎn)進(jìn)行高層次的概述。

當(dāng)然，我無法告訴你哪個(gè)框架是“最佳”的：這取決於你的主觀感受，以及你當(dāng)前的 JavaScript 經(jīng)驗(yàn)水平和正在開發(fā)的應(yīng)用程序類型。但是，我會(huì)快速讓你了解主要競(jìng)爭(zhēng)者，並幫助你做出明智的決策，選擇哪個(gè)框架進(jìn)行深入學(xué)習(xí)。

關(guān)鍵要點(diǎn)

• React、Angular、Vue.js、Svelte 和 Ember.js 是最流行的前端 JavaScript 框架，各有其獨(dú)特的優(yōu)勢(shì)和劣勢(shì)。流行程度是根據(jù) 2020 年 JavaScript 狀態(tài)調(diào)查和 Stack Overflow 開發(fā)者調(diào)查的使用數(shù)據(jù)確定的。
• React 由 Facebook 開發(fā)，是最流行的框架，以其可重用的組件、單向數(shù)據(jù)流模型和虛擬 DOM 而聞名。它的學(xué)習(xí)曲線適中，最適合任何規(guī)模的數(shù)據(jù)驅(qū)動(dòng)型應(yīng)用程序。
• Angular 由 Google 創(chuàng)建，是構(gòu)建單頁客戶端應(yīng)用程序的全面解決方案。在五個(gè)框架中，它的學(xué)習(xí)曲線最陡峭，非常適合團(tuán)隊(duì)合作構(gòu)建大型應(yīng)用程序。
• Vue.js 旨在逐步採用，這意味著它可以用來增強(qiáng)常規(guī)網(wǎng)頁或構(gòu)建完整的單頁應(yīng)用程序。它的入門門檻低，適用於各種規(guī)模的應(yīng)用程序。
• Svelte 採用不同的方法，在構(gòu)建時(shí)將你的應(yīng)用程序轉(zhuǎn)換為理想的 JavaScript 代碼。雖然它的學(xué)習(xí)曲線非常低，但它的社區(qū)仍然很小，最適合小型項(xiàng)目。
• Ember.js 是五個(gè)框架中最有主見的，最適合團(tuán)隊(duì)合作構(gòu)建豐富、複雜的前端應(yīng)用程序。它的學(xué)習(xí)曲線適中到陡峭，不適合初學(xué)者或小型項(xiàng)目。

我如何衡量流行度？

流行度是根據(jù) 2020 年 JavaScript 狀態(tài)調(diào)查的框架使用情況確定的。該調(diào)查共有 23,765 名受訪者參與，競(jìng)爭(zhēng)者的排名如下：

1. React：80%
2. Angular：56%
3. Vue.js：49%
4. Svelte：15%
5. Preact：13%

我還考慮了同一調(diào)查中的“框架認(rèn)知度”：

1. React：100%
2. Angular：100%
3. Vue.js：99%
4. Ember：88%
5. Svelte：86%

我還將這些結(jié)果與 2020 年 Stack Overflow 開發(fā)者調(diào)查的框架使用情況進(jìn)行了交叉驗(yàn)證。該調(diào)查共有 65,000 名受訪者參與，其結(jié)果與 JavaScript 狀態(tài)調(diào)查的結(jié)果基本一致——儘管不幸的是，它並沒有區(qū)分前端和後端框架。

當(dāng)然，還可以參考許多其他指標(biāo)，例如職位空缺、GitHub 星星、npm 下載量、GitHub“使用情況”等等。如果你想了解其中一些指標(biāo)（至少對(duì)於前三大框架而言），請(qǐng)參考這個(gè) GitHub Gist。

要交互式地查看這些框架的對(duì)比情況，可以參考 npmtrends 的這個(gè)圖表。

我們?nèi)绾味x前端框架？

最關(guān)鍵的問題是，列表中最流行的框架（React）將自己定義為“庫”。

我不希望深入探討這個(gè)問題，因?yàn)橐呀?jīng)有完整的文章專門解釋框架和庫之間的區(qū)別。在本篇文章中，我將使用 Martin Fowler 提供的以下定義：

庫本質(zhì)上是一組可以調(diào)用的函數(shù)，如今通常組織成類。每次調(diào)用都會(huì)執(zhí)行一些工作，然後將控制權(quán)返回給客戶端。

框架體現(xiàn)了一種抽象設(shè)計(jì)，並內(nèi)置了更多行為。為了使用它，你需要將你的行為插入到框架的各個(gè)地方，方法是通過子類化或插入你自己的類。然後，框架的代碼會(huì)在這些點(diǎn)調(diào)用你的代碼。

在我看來，React 更符合框架的行為，而不是庫。雖然它在技術(shù)上不是框架，但開發(fā)人員通常會(huì)從其生態(tài)系統(tǒng)中採用許多工具和包來使其發(fā)揮框架的作用。

1. React

• 網(wǎng)站：http://ipnx.cn/link/138a14eaf4a8c188a6c41cafd9400a30
• GitHub：http://ipnx.cn/link/9ed19fde2d99cd17ceafd0fe127f3176

React 最初由 Facebook 於 2013 年發(fā)布，是目前最流行的前端 JavaScript 框架。 Facebook、Netflix 和 Airbnb 等公司都在生產(chǎn)環(huán)境中使用 React，它擁有龐大的開發(fā)者群體——這意味著很容易在線找到幫助和資源。

React 的主要目的是從可重用的組件中組合交互式用戶界面。它使用 JSX（JavaScript 的語法擴(kuò)展）進(jìn)行模板化，並實(shí)現(xiàn)單向數(shù)據(jù)流模型來使用數(shù)據(jù)填充組件。每當(dāng)組件數(shù)據(jù)發(fā)生變化時(shí)，React 都會(huì)使用其虛擬 DOM 快速有效地更新頁面。

開發(fā)者工具很好用。 React 團(tuán)隊(duì)構(gòu)建並維護(hù)了一個(gè) CLI（Create React App）來快速輕鬆地搭建新項(xiàng)目，以及適用於 Chrome 和 Firefox 的開發(fā)者工具擴(kuò)展。有許多可用的第三方包可以完成各種任務(wù)（例如路由、處理表單和動(dòng)畫），以及一些基於 React 的框架，例如 Next.js 和 Gatsby。

React 遵循“一次學(xué)習(xí)，隨處編寫”的理念。它可以使用 React Native 驅(qū)動(dòng)移動(dòng)應(yīng)用程序，並可以使用 Node 在服務(wù)器端渲染。這意味著出色的 SEO 支持，隨著服務(wù)器組件的推出，這種支持只會(huì)越來越好。

React 的主要批評(píng)之一是它過於不受約束：它只關(guān)注應(yīng)用程序的視圖層，而將其他所有內(nèi)容留給開發(fā)者。有些人喜歡這種自由，但其他人——尤其是新開發(fā)者——可能會(huì)被這種鼓勵(lì)的非結(jié)構(gòu)化編碼方法所壓倒。

React 的學(xué)習(xí)曲線適中。它鼓勵(lì)使用各種函數(shù)式編程範(fàn)式（例如不變性和純函數(shù)），這意味著開發(fā)者最好在嘗試構(gòu)建任何嚴(yán)肅的東西之前掌握這些概念。

如果你對(duì) React 的不受約束的方法以及它將大部分開發(fā)過程留給開發(fā)者感到滿意，那麼它對(duì)於任何規(guī)模的數(shù)據(jù)驅(qū)動(dòng)型應(yīng)用程序來說都是一個(gè)不錯(cuò)的選擇。

2. Angular

• 網(wǎng)站：http://ipnx.cn/link/2c8a0f42adb0345a7e348beb5706d949
• GitHub：http://ipnx.cn/link/3b0cc5f591dd5b8dacb0c8e01546b2b4

Angular 是 Google 在前端框架領(lǐng)域的產(chǎn)品。它於 2010 年作為 AngularJS（或 Angular 1）誕生，並立即取得了成功，主要是因?yàn)樗堑谝粋€(gè)使開發(fā)人員能夠構(gòu)建我們現(xiàn)在稱為單頁應(yīng)用程序的框架。

為了解決性能問題以及構(gòu)建大型 JavaScript 應(yīng)用程序的挑戰(zhàn)，Google 從頭開始重寫了 AngularJS，並在 2016 年發(fā)布了 Angular 2（現(xiàn)在簡(jiǎn)稱為 Angular）。這兩個(gè)版本之間沒有簡(jiǎn)單的遷移路徑，因此 AngularJS 和 Angular 成為兩個(gè)獨(dú)立的框架。 AngularJS 現(xiàn)在已停止維護(hù)，不應(yīng)用於新項(xiàng)目。

至於 Angular，它是前端框架世界中的重量級(jí)人物。 Google 和 Microsoft 等公司都在生產(chǎn)環(huán)境中使用它，因此它絕對(duì)經(jīng)過了充分的實(shí)戰(zhàn)檢驗(yàn)。在線上也有許多可用的資源（例如優(yōu)秀的 Tour of Heroes 教程），並且 Stack Overflow 上也有很多關(guān)於 Angular 的問題。

與僅處理視圖層的 React 不同，Angular 提供了構(gòu)建單頁客戶端應(yīng)用程序的完整解決方案。 Angular 組件可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定，這允許它們同時(shí)監(jiān)聽事件並在父組件和子組件之間更新值。模板是 HTML 片段，允許使用特殊語法來利用 Angular 的許多功能。 TypeScript 是 Angular 開發(fā)的主要語言，使該框架特別適合企業(yè)級(jí)應(yīng)用程序。

工具很好用。 Angular 提供了一個(gè)高度拋光的 CLI 來初始化、開發(fā)、搭建和維護(hù) Angular 應(yīng)用程序。還提供 Chrome 和 Firefox Dev Tools 擴(kuò)展程序來幫助調(diào)試 Angular 應(yīng)用程序。 Angular 原生就提供了處理許多常見任務(wù)（例如表單和路由）的解決方案，但仍然存在豐富的第三方庫生態(tài)系統(tǒng)。

在我看來，Angular 的學(xué)習(xí)曲線是這裡列出的所有框架中最陡峭的。開發(fā)人員需要熟悉 TypeScript，以及裝飾器和依賴注入等概念，才能有效地使用該框架。因此，它不適合新開發(fā)者。相反，它更適合團(tuán)隊(duì)合作構(gòu)建大型應(yīng)用程序。

如果你想全面了解 React 和 Angular 之間的區(qū)別，請(qǐng)參閱“React 與 Angular：深入比較”。

3. Vue.js

請(qǐng)注意，這些統(tǒng)計(jì)數(shù)據(jù)適用於 Vue v2。版本 3 可用，但必須安裝為 vue@next。

• 網(wǎng)站：http://ipnx.cn/link/51430076a21dfc5745a77df028b869d1
• GitHub：http://ipnx.cn/link/b0e2ff951d07b244a06800304fb423f0

我們的列表中排名第三的是 Vue.js，這是一個(gè)模型-視圖-視圖模型 (MVVM) 前端框架，用於構(gòu)建用戶界面和單頁應(yīng)用程序。它由尤雨溪編寫，於 2014 年首次發(fā)布。 Vue 擁有非常忠實(shí)的開發(fā)者群體（例如，它比 React 擁有更多的 GitHub 星星），這可能是因?yàn)樗芎玫靥钛a(bǔ)了 AngularJS 重寫為 Angular 後留下的空白。

Vue 由大約 20 名核心團(tuán)隊(duì)成員開發(fā)和維護(hù)，雖然它沒有直接得到互聯(lián)網(wǎng)巨頭的支持，但阿里巴巴、Gitlab 和 Adobe 等公司都在生產(chǎn)環(huán)境中使用它。 Vue 的文檔可以說是所有框架中最好的，其論壇也是獲得代碼問題幫助的絕佳資源。 Vue 在 PHP 世界也很流行，並作為 Laravel 框架的一部分提供。

Vue 的一個(gè)賣點(diǎn)是它從一開始就設(shè)計(jì)為可逐步採用。這意味著你可以將 Vue 添加到常規(guī)網(wǎng)頁中以增強(qiáng)其功能，或者你可以全力以赴地使用它來構(gòu)建完整的單頁應(yīng)用程序。 Vue.js 使用基於 HTML 的模板語法，允許你輕鬆地將屬性綁定到底層數(shù)據(jù)模型。它還提供單文件組件，將模板、JavaScript 代碼和作用域 CSS 保留在同一個(gè)文件中。

Vue 周圍的工具很棒。有一個(gè)官方的 CLI 來搭建和開發(fā) Vue 應(yīng)用程序，並且有一個(gè)針對(duì) Chrome 和 Firefox 的開發(fā)者工具擴(kuò)展程序來幫助調(diào)試。與 React 形成鮮明對(duì)比的是，Vue 提供了用於路由和狀態(tài)管理的官方包，這提供了一種令人愉悅的標(biāo)準(zhǔn)化方法。還有一些廣泛的第三方工具，以及基於 Vue 的框架，例如 Nuxt.js 和 Gridsome（Vue 對(duì) React 的 Next.js 和 Gatsby 的回應(yīng)）。

使用 Vue 的入門門檻很低，部分原因是它採用增量方法構(gòu)建應(yīng)用程序，部分原因是它基於 HTML、CSS 和 JavaScript——這些技術(shù)對(duì)於任何開發(fā)人員來說都應(yīng)該很熟悉。

Vue 是各種規(guī)模應(yīng)用程序的絕佳選擇。它適合經(jīng)驗(yàn)較少的開發(fā)人員，以及那些更喜歡從框架中獲得更多結(jié)構(gòu)和指導(dǎo)的開發(fā)人員。

4. Svelte

• 網(wǎng)站：http://ipnx.cn/link/bf9106abee8a404bd4d041e12af5883b
• GitHub：http://ipnx.cn/link/7048a4636546df0025a5a78b0fc517c0

Svelte 由 Rich Harris 於 2016 年發(fā)布，是框架領(lǐng)域的新成員，它採用與本列表中其他任何框架都不同的方法來構(gòu)建 Web 應(yīng)用程序。其網(wǎng)站指出：

Svelte 在構(gòu)建時(shí)將你的應(yīng)用程序轉(zhuǎn)換為理想的 JavaScript 代碼，而不是在運(yùn)行時(shí)解釋你的應(yīng)用程序代碼。這意味著你不會(huì)為框架的抽象付出性能代價(jià)，並且在應(yīng)用程序首次加載時(shí)也不會(huì)受到懲罰。

換句話說，它避免了虛擬 DOM 的概念，而是在構(gòu)建時(shí)將你的代碼編譯成小型、普通的 JavaScript 模塊，這些模塊會(huì)在你的應(yīng)用程序狀態(tài)發(fā)生變化時(shí)更新 DOM。正如你所想像的那樣，這使得應(yīng)用程序速度更快，佔(zhàn)用空間更小。 Svelte 還原生處理狀態(tài)管理，並開箱即用地提供反應(yīng)性。

不幸的是，工具目前有點(diǎn)讓人頭疼。最初，Sapper（一個(gè)構(gòu)建在 Svelte 之上的應(yīng)用程序框架）用於構(gòu)建具有預(yù)定義結(jié)構(gòu)的 Svelte 應(yīng)用程序，並為其配備一些更高級(jí)的功能，例如路由和服務(wù)器端渲染。但是，在 2020 年 11 月，Svelte 的創(chuàng)建者宣布 Sapper 的 1.0 版本永遠(yuǎn)不會(huì)發(fā)布，並且 SvelteKit 現(xiàn)在是開始使用 Svelte 構(gòu)建應(yīng)用程序的唯一推薦方法。還提供適用於 Chrome 和 Firefox 的瀏覽器開發(fā)者工具擴(kuò)展程序，以及各種第三方模塊，儘管數(shù)量遠(yuǎn)不及更成熟的框架。

雖然 Svelte 的學(xué)習(xí)曲線非常低，但其社區(qū)仍然很小，並且尚未獲得與這裡提到的前三大框架相同的吸引力。但 IBM 和紐約時(shí)報(bào)等公司正在生產(chǎn)環(huán)境中使用它，它絕對(duì)是一個(gè)值得在未來幾個(gè)月和幾年內(nèi)關(guān)注的框架。

由於 Svelte 還不夠成熟，因此它非常適合小型項(xiàng)目。不過，這種情況正在改變。 SvelteKit 處於公開測(cè)試階段，社區(qū)也在不斷發(fā)展壯大。雖然 Svelte 目前還算是一個(gè)新來者，但你應(yīng)該關(guān)注這個(gè)領(lǐng)域……

5. Ember.js

• 網(wǎng)站：http://ipnx.cn/link/feae21bb32b7b4aa690fab151b60b598
• GitHub：http://ipnx.cn/link/2f27e0f4118efff145aeecd8367fbb37

我在本文中將 Ember 作為最後一個(gè)框架來介紹，因?yàn)樗鼜那岸丝蚣艿脑缙诰痛嬖诹?。它最初?2011 年發(fā)布，但在開發(fā)人員中仍然保持著持續(xù)的流行度：

它已經(jīng)有近十年的歷史了，其歷史可以追溯到 React、Vue、Svelte 和所有其他框架之前。該框架從未處於前端炒作浪潮的最前沿，但它默默地使團(tuán)隊(duì)能夠穩(wěn)定而持續(xù)地發(fā)布產(chǎn)品——其中包括Qonto 和CLARK，這兩家公司都是2020 年歐洲排名前50 的金融科技公司

與 Angular 類似，Ember 採用了一種更全面的方法來進(jìn)行應(yīng)用程序開發(fā)，並提供了構(gòu)建現(xiàn)代前端 JavaScript 應(yīng)用程序所需的一切。這包括路由解決方案、數(shù)據(jù)層以及默認(rèn)情況下內(nèi)置於每個(gè)應(yīng)用程序中的功能齊全的現(xiàn)代測(cè)試工具。它遵循六週的發(fā)布週期（當(dāng)發(fā)布新的次要版本時(shí)），並致力於穩(wěn)定性。對(duì)於那些無法不斷重寫應(yīng)用程序以避免被發(fā)展速度更快的框架甩在後面的開發(fā)人員來說，這可能是一個(gè)真正的優(yōu)勢(shì)。

圍繞Ember 出現(xiàn)了一系列廣泛的工具，從Ember CLI（創(chuàng)建、構(gòu)建、測(cè)試和服務(wù)Ember 應(yīng)用程序的官方方法）到Ember Inspector（官方支持的瀏覽器附加組件，使你能夠檢查應(yīng)用程序中的Ember 對(duì)象）。還有一些可用的第三方庫，並且 CLI 提供了一種常見格式（即 Ember Addons）來分發(fā)它們。

Ember 的社區(qū)不如 React 等社區(qū)大，但其成員非常積極參與，並擁有論壇和 Discord 服務(wù)器，你可以在那裡尋求代碼問題的幫助。 Ember 是這裡列出的框架中最有主見的，它採用“約定優(yōu)於配置”的方法。這加上開發(fā)人員需要熟悉更高級(jí)的概念——例如序列化器和適配器——使其學(xué)習(xí)曲線適中到陡峭。

Ember 可能不適合初學(xué)者或小型項(xiàng)目。它有很多活動(dòng)部件，並且在如何構(gòu)建事物方面並沒有提供太多靈活性。但當(dāng)與團(tuán)隊(duì)一起構(gòu)建豐富、複雜的前端應(yīng)用程序時(shí)，它確實(shí)會(huì)大放異彩。

結(jié)論

這就是我對(duì)當(dāng)今市場(chǎng)上五個(gè)最流行的前端框架的比較。雖然這不是對(duì)每個(gè)框架功能的詳盡考察，但我希望它能讓你了解哪些主要競(jìng)爭(zhēng)者可能適合你的下一個(gè)項(xiàng)目，或者哪些框架值得你進(jìn)一步探索。

如果你有任何問題或意見，為什麼不加入 SitePoint 論壇進(jìn)行討論呢？

前端框架常見問題解答 (FAQ)

選擇前端框架時(shí)需要考慮哪些關(guān)鍵因素？

選擇前端框架時(shí)，需要考慮學(xué)習(xí)曲線、社區(qū)支持、文檔、靈活性和性能等因素。如果你不熟悉前端開發(fā)，學(xué)習(xí)曲線很重要。有些框架比其他框架更容易學(xué)習(xí)。社區(qū)支持對(duì)於在遇到問題時(shí)獲得幫助至關(guān)重要。大型活躍的社區(qū)通常意味著更多資源和教程。良好的文檔可以使學(xué)習(xí)過程更順利。靈活性是指框架適應(yīng)不同項(xiàng)目需求的能力。最後，性能會(huì)影響應(yīng)用程序的速度和用戶體驗(yàn)。

Angular 與其他前端框架相比如何？

Angular 是 Google 開發(fā)的一個(gè)功能強(qiáng)大、功能豐富的框架。它以其雙向數(shù)據(jù)綁定、依賴注入和模塊化架構(gòu)而聞名。但是，與其他框架相比，它的學(xué)習(xí)曲線很陡峭。它非常適合大型複雜的應(yīng)用程序。

使用 React 的優(yōu)勢(shì)是什麼？

React 由 Facebook 開發(fā)，以其虛擬 DOM 而聞名，虛擬 DOM 通過最大限度地減少對(duì)實(shí)際 DOM 的直接操作來提高性能。它是基於組件的，這促進(jìn)了可重用性和可維護(hù)性。它還有一個(gè)龐大的社區(qū)和大量的庫。

為什麼我會(huì)選擇 Vue 而不是其他前端框架？

Vue 是一個(gè)漸進(jìn)式框架，這意味著你可以逐步採用它。它易於學(xué)習(xí)，語法比 Angular 和 React 更簡(jiǎn)單。它還有一個(gè)虛擬 DOM 和基於組件的架構(gòu)。它非常適合中小型項(xiàng)目。

你能解釋一下 Angular 中雙向數(shù)據(jù)綁定的概念嗎？

Angular 中的雙向數(shù)據(jù)綁定意味著當(dāng)模型中的數(shù)據(jù)發(fā)生變化時(shí)，視圖會(huì)反映這種變化，反之亦然。模型和視圖之間的這種同步簡(jiǎn)化了代碼並提高了可讀性。

React 和 Vue 中的虛擬 DOM 是什麼？

虛擬 DOM 是實(shí)際 DOM 的輕量級(jí)副本。當(dāng)發(fā)生更改時(shí)，首先會(huì)對(duì)虛擬 DOM 進(jìn)行更改。然後，差異算法會(huì)將新的虛擬 DOM 與舊的虛擬 DOM 進(jìn)行比較，並且只有實(shí)際的更改才會(huì)在真實(shí)的 DOM 中更新。此過程提高了性能。

Angular 的模塊化架構(gòu)如何使開發(fā)人員受益？

Angular 的模塊化架構(gòu)將代碼組織成模塊，每個(gè)模塊負(fù)責(zé)一項(xiàng)特定功能。這種關(guān)注點(diǎn)分離使代碼更易於維護(hù)和測(cè)試。它還促進(jìn)了代碼的可重用性和可擴(kuò)展性。

React 和 Vue 中基於組件的架構(gòu)有何意義？

基於組件的架構(gòu)將 UI 分解成獨(dú)立的可重用組件。每個(gè)組件都有其自身的邏輯並控制 UI 的一部分。這種方法促進(jìn)了代碼的可重用性、可維護(hù)性和可測(cè)試性。

社區(qū)支持如何影響前端框架的選擇？

大型活躍的社區(qū)可以提供寶貴的資源、教程和幫助，讓你在遇到問題時(shí)獲得幫助。它還表明了框架的流行程度和使用壽命。 Angular、React 和 Vue 都擁有強(qiáng)大的社區(qū)支持。

性能如何影響前端開發(fā)中的用戶體驗(yàn)？

性能直接影響應(yīng)用程序的速度。緩慢的應(yīng)用程序可能會(huì)讓用戶感到沮喪，並導(dǎo)致較高的跳出率。因此，選擇高性能框架可以增強(qiáng)用戶體驗(yàn)。

以上是比較了5個(gè)最受歡迎的前端框架的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！