本文對(duì)三個(gè)最流行的 JAVAScript 框架進(jìn)行了全面的比較：Vue、React 和 Angular，如果你是正在開(kāi)發(fā)或者目前正在考慮使用這些流行框架之一來(lái)啟動(dòng)項(xiàng)目的開(kāi)發(fā)人員，我們希望本文對(duì)你選擇正確的解決方案能有所幫助。
本文最初發(fā)表在 Medium 博客，經(jīng)原作者 inVerita 公司授權(quán)，InfoQ 中文站翻譯并分享。
近幾年 ，前端領(lǐng)域出現(xiàn)了兩大玩家：google 發(fā)布的 Angular、Facebook 開(kāi)發(fā)的 JavaScript 庫(kù) React。在 2018 年，又有一個(gè)實(shí)力雄厚的玩家加入了這場(chǎng)競(jìng)爭(zhēng)：Vue.js，它 很直白地表示出了自己 的豪心壯志——立志成為最受歡迎的 JavaScript 框架。
在深入了解這些流行框架的總體比較之前，讓我們先看看它們的起源。
Vue、React 和 Angular 簡(jiǎn)史
Angular
Google 的一名員工 Misko Hevery 當(dāng)時(shí)正在做一個(gè)副業(yè)項(xiàng)目，旨在簡(jiǎn)化構(gòu)建 Web 應(yīng)用程序的過(guò)程。他在 2010 年將解決方案作為開(kāi)源項(xiàng)目發(fā)布，名為 AngularJS，并被一些 知名企業(yè) 積極使用。
幾年后，由于 JavaScript 有了新的進(jìn)展，團(tuán)隊(duì)被迫將 AngularJS 基于 TypeScript 重寫(xiě) ，為了避免混淆，新框架名稱(chēng)去掉了“JS”。Angular 每年更新兩次，上一次更新是 2020 年 2 月 6 日發(fā)布的 Angular 9。
React
在 JavaScript 框架中，React 一直處于領(lǐng)先地位，它最初是 Facebook 為滿(mǎn)足其產(chǎn)品需求而開(kāi)發(fā)的，并于 2013 年成功地向技術(shù)受眾展示并開(kāi)源。React 的精髓源于 Jordan Walke 創(chuàng)建的早期原型——Fax.js，該原型于 2011 年首次部署在 Facebook 的新聞源中。React 最新版本為 16.13.0，于 2020 年 2 月 26 日發(fā)布。
Vue.js
Google 前雇員 Evan You 在與 Angular 合作多年后，決定 自己 創(chuàng)建一個(gè)輕量級(jí)框架，其中將包含上述框架的最佳特性。 新框架 Vue.js 于 2014 年 2 月開(kāi)源 ，從那時(shí)起，Vue.js 就獲得了極高的人氣。最新版本為 2.6 macross ，于 2019 年 2 月 4 日發(fā)布。
框架流行度
Angular 和 React 是一對(duì)由來(lái)已久的對(duì)手。它們都是功能強(qiáng)大、最新、使用廣泛的 JavaScript 框架，并且都面臨著一個(gè)重大的變化：它們之間的競(jìng)爭(zhēng)變成了 一場(chǎng) 流行度的較量。我們將通過(guò)四個(gè)主要指標(biāo)來(lái)找出最流行的框架：NPM 趨勢(shì)、Stack Overflow Survey、GitHub stars 和公開(kāi)的職位招聘。
- 在 Node Package Manager 報(bào)告中，React 仍然是最流行的 JavaScript 框架。從 2018 年 12 月到 2020 年 7 月這段時(shí)間，它的年下載量大約是 Vue.js 的 5 倍，是 Angular 的 13 倍。
各框架的年下載量
- 根據(jù) 2019 年 Stack Overflow 開(kāi)發(fā)人員調(diào)查結(jié)果，React 最受開(kāi)發(fā)人員喜愛(ài)（74.5%）、其次是 Vue.js（73.6%），最后是 Angular.js（57.6%）。
開(kāi)發(fā)人員 最喜歡的 Web 框架
- 第四次 JavaScript Risiing Stars 統(tǒng)計(jì) 了 GitHub 每年新增的星數(shù)，顯示了驚人的統(tǒng)計(jì)數(shù)據(jù)：Vue.js 以 31.4k 星排名第一，React 以 22.4k 星排名第二，Angular.js 以 12k 星排名第四。
- 2020 年 7 月 8 日在 Indeed 招聘網(wǎng)站搜索的結(jié)果顯示：在美國(guó)，React 有 43678 個(gè)招聘職位，Angular 有 10458 個(gè)招聘職位，而 Vue.js 僅有 1391 個(gè)招聘職位。
因此，我們可以 認(rèn)為 ，React 在工作崗位方面是個(gè)贏家，在開(kāi)發(fā)人員中的受歡迎程度經(jīng)久不衰。盡管如此，我們也可以看到，由于 Vue.js 社區(qū)堅(jiān)定的支持，Vue.js 與 React 的對(duì)立情緒越來(lái)越激烈。Angular 保持著穩(wěn)定的中間地位，得到了來(lái)自開(kāi)發(fā)商和雇主雙方的積極反饋。
框架組件
框架的性能是由最有價(jià)值的部分——它的組件決定的。它們的工作流與接收輸入數(shù)據(jù)的方式以及對(duì)數(shù)據(jù)的響應(yīng)方式有關(guān)。
Angular
Angular 的組件命名為 directive（指令） ， 它們是由 Angular 跟蹤的 DOM 元素上的標(biāo)記。 A ngular 將組件的 UI 部分作為 html 標(biāo)簽的屬性 ，并將 UI 和 組件的 行為以 JavaScript 代碼的形式分離開(kāi)來(lái)。
React
與 Angular 相反，React 結(jié)合了 UI 和組件的行為。簡(jiǎn)單地說(shuō)，同一部分 代碼 負(fù)責(zé) UI 元素的創(chuàng)建并控制其行為。
Vue.js
在 Vue.js 中，UI 和行為是組件的一部分。該框架也是高度可定制的，允許在腳本中結(jié)合 UI 和組件行為。
性能和框架大小
Angular
Angular 使用真實(shí) DOM，因此它最適合用于內(nèi)容不時(shí)更新的單頁(yè)應(yīng)用程序。這會(huì)使更新過(guò)程變得非常緩慢，并且在丟失流的情況下，將需要花費(fèi)很長(zhǎng)時(shí)間才能找出問(wèn)題所在。值得慶幸的是，雙向數(shù)據(jù)綁定過(guò)程將模型中所做的所有更改都以一種安全高效的方式復(fù)制到視圖中。由于可用的特性范圍很廣，與 Vue 和 React 相比，應(yīng)用程序要“重”得多（約 500KB），這會(huì)稍微降低性能。
React
與 Angular 相反，React 使用了虛擬 DOM，增強(qiáng)了需要定期 更新 內(nèi)容的所有應(yīng)用程序 （不論大小） 的性能。單向數(shù)據(jù)可以更好地控制項(xiàng)目。缺點(diǎn)可能是開(kāi)發(fā)人員需要不斷升級(jí)他們的技能，以適應(yīng) React 不斷發(fā)展的特性。由于 React 沒(méi)有提供 大量 的庫(kù)，所以，它的大小比 Angular 要小得多（ 只有 約 100KB）。
Vue.js
Vue 也使用虛擬 DOM，因此在項(xiàng)目中的更改不會(huì)正式對(duì) DOM 產(chǎn)生影響。Vue 在這三者中，大小最小（大約 80KB），這大大提高了它的性能。
總之，考慮到性能，Vue 和 React 在開(kāi)發(fā)易于維護(hù)和無(wú) Bug 的 Web 應(yīng)用程序更加方便。
對(duì)于正在考慮學(xué)習(xí) 新框架 的人來(lái)說(shuō)，掌握一個(gè)新框架的過(guò)程 是否足夠簡(jiǎn)單 非常重要。那么，在它們?nèi)齻€(gè)中，哪一個(gè)最適合學(xué)習(xí)呢？
學(xué)習(xí)曲線
Vue.js 可能是最容易學(xué)的 ， 這主要有兩個(gè)原因：
- 它不需要特殊的設(shè)置。首先，你只需將 Vue 庫(kù)導(dǎo)入到 HTML 文件中，并添加一些 JS（對(duì)于較大的 Vue 項(xiàng)目）即可。
- 無(wú)需學(xué)習(xí)大型特殊語(yǔ)法。Vue 的用法基于 JavaScript 和 HTML，通過(guò) v-for 之類(lèi)的指令進(jìn)行了增強(qiáng)，這些指令都很容易解釋。
Angular 和 React 都需要更為復(fù)雜的項(xiàng)目設(shè)置。不過(guò)，安裝設(shè)置的可用性簡(jiǎn)化了這項(xiàng)任務(wù)： create-react-App 、 Angular CLI 和 Vue CLI （用于更復(fù)雜的項(xiàng)目）。
要掌握 Angular 和 React，還需要學(xué)習(xí)相應(yīng)的 TypeScript 或 JSX 語(yǔ)法。
其中 ，Angular 的學(xué)習(xí)曲線被認(rèn)為比 React 要陡峭得多。Angular 是一個(gè)不斷發(fā)展的復(fù)雜框架，為解決單個(gè)問(wèn)題提供了多種選擇。
React 也需要 開(kāi)發(fā)者持續(xù)學(xué)習(xí) ，因?yàn)樗?jīng)常更新，但若有 初學(xué)者教程和基本的 JavaScript 知識(shí)，學(xué)習(xí)起來(lái)就會(huì)容易 得多 。主要困難在于 Redux 庫(kù)。
應(yīng)用案例
Angular
Angular 由 Google 開(kāi)發(fā)，并在其 Adwords 應(yīng)用程序中 大量 使用，以最大限度地提高性能。其他使用 Angular 的著名網(wǎng)站，我們可以列舉如下：Guardian、Lego、Nike、PayPal 和 Weather.com。
React
React 最初是為 Facebook 設(shè)計(jì)的，現(xiàn)在仍被該公司積極用于創(chuàng)建各種產(chǎn)品 ，包括 Twitter、Instagram、Whatapp 和 WordPress 都 采用了這個(gè)框架。
Vue.js
與 Angular 和 React 不同，Vue 并沒(méi)有強(qiáng)大的客戶(hù)在其每個(gè)產(chǎn)品中實(shí)現(xiàn)它。不過(guò)，值得慶幸的是它的靈活性。它已經(jīng)在這些流行品牌中得到了普及：9Gag、Nintendo、GitLab 和 Grammarly 等。
小結(jié)： Vue、React、Angular 的對(duì)照表
Vue、React 和 Angular 的對(duì)照表
我們希望本文對(duì) Vue、React 和 Angular 的比較 能 對(duì)你有所幫助。
參考閱讀：
https://medium.com/swlh/vue-vs-react-vs-angular-what-framework-would-you-choose-5d77a3680b0d
