【51CTO.com快譯】對于開發(fā)人員而言，選擇技術(shù)棧有時是一件相當棘手的任務。因為您需要綜合考慮諸如：預算、時間、應用大小、最終用戶、項目目標、以及可用資源等多方面因素。

無論您是初學者、開發(fā)人員、自由職業(yè)者還是項目架構(gòu)師，只有詳細了解了每種框架的優(yōu)、缺點，才能做出明智的決定。因此，本文不會簡單地幫您選擇出所謂***的框架，而是完全由您的項目范圍和框架適用性，來決定自己的選擇結(jié)果。當然，本文旨在幫助您更好地理解每一種框架的特點及其趨勢。

讓我們開始吧

首先讓我們看看來自于Google趨勢的有關(guān)React、Angular和Vue.js的對比。

就過去一年的情況而言，Angular***，React名列其后，而Vue.js所占份額則最少。 

React、Angular與Vue的對比

下面這些問題有助于您更好地理解這些框架特點：

• 它們是否成熟并適合構(gòu)建可擴展的應用程序？
• 是否容易找到或招募到每種框架的開發(fā)人員？
• 您知道這里所列的每種框架其背后的核心概念嗎？
• 您是否分析過每種框架的性能、速度和學習曲線？
• 是否有何種工具可以使用這些庫，來開發(fā)應用程序？

下面讓我們來逐一回答上述問題。

每種框架的發(fā)展歷史

React是為Web應用構(gòu)建不同的UI組件所提供的JavaScript庫。它由Facebook進行維護，許多諸如Uber、Netflix、Twitter、Udemy、Paypal、Reddit、Tumblr和Walmart等知名企業(yè)都在他們的開發(fā)環(huán)境中使用到了React。

React Native是Facebook投資研發(fā)的另一款框架，它利用JavaScript和React來構(gòu)建原生的移動應用。由于其各種突出的特點和功能，許多知名公司都已轉(zhuǎn)用React來進行開發(fā)。在網(wǎng)上，雖然React與Vue.js之爭喋喋不休，但同時也給了我們許多選擇***框架方面的借鑒。

Angular是一種由Google支持的、基于TypeScript（一種由微軟開發(fā)的自由和開源的編程語言）的JavaScript框架，同時也是一種非常受前端開發(fā)者歡迎的框架。其中Angular和Angular2都是在AngularJS（框架的***個版本）的基礎(chǔ)上重寫而來。

Angular在全球開發(fā)者中廣受歡迎，其組織類用戶包括Google、Forbes、WhatsApp、Instagram和healthcare.gov等財富500強企業(yè)。

Vue.js是如今經(jīng)常被討論到的、且快速增長的JavaScript框架之一。其作者是Google的前雇員Evan You。他在Google供職期間曾從事過Angular的研發(fā)。Vue.js使用HTML、CSS和JavaScript來構(gòu)建出各種酷炫的用戶界面（UI）。Alibaba、GitLab和Baidu都在使用Vue.js，同時它也被全球眾多開發(fā)者與設(shè)計師所推崇。

流行與市場趨勢

根據(jù)Stackoverflow（一個與程序相關(guān)的IT技術(shù)問答網(wǎng)站）2017年的調(diào)查，51.7%的開發(fā)者喜歡Angular，而66.9%的受訪者則喜歡用React。可見，在前端框架領(lǐng)域，React和Angular有著幾乎相同的用戶歡迎度。雖然Vue在此領(lǐng)域尚無一席之地，但它絕對有實力參與這場“戰(zhàn)斗”。

下面，再來看看GitHub對此三種框架的***統(tǒng)計。 

GitHub的該圖表顯示在開發(fā)人員中，Vue的普及程度超過了Angular和React。目前，Vue有108086顆星，React有106807顆星，而Angular則有38654顆星。

因此，單從統(tǒng)計數(shù)字而言，Vue.js可謂是一枝獨秀，其良好且易用的架構(gòu)，足以吸引各類開發(fā)者的眼球。

當然，Angular和React仍擁有著眾多行業(yè)內(nèi)的大牌企業(yè)用戶。Google在其許多項目中都使用到了Angular；而Facebook、Airbnb、Dropbox、WhatsApp和Netflix則在它們的開發(fā)環(huán)境中使用的是React。

社區(qū)支持和增長

由于Facebook支持著React，而Google支持著Angular，因此這兩種框架的增長是毋庸置疑的。它們能夠持續(xù)得到更新與發(fā)布，在碰到遷移時也有著很好的維護與支持。React和Angular的開發(fā)人員都聲稱：升級不是問題，他們會每六個月發(fā)布一次主要更新。

從這個角度來看，雖然Vue.js也可以通過一個遷移輔助工具，來輕松實現(xiàn)遷移。但是就一款大型應用而言，它可能面臨的問題是：缺少專注于版本控制與計劃的路線圖。

另外，由于Angular是一個完備的框架，而React是一組更獨立、更快捷、且不斷改進的庫，因此React比Angular更靈活。不過，您也必須關(guān)注那些可能不再被支持或維護的小模塊。

容易找到開發(fā)人員嗎？

由于React更多地涉及到了JavaScript，因此人們有時會傾向于選擇Angular或Vue。畢竟HTML更為普及，而React使用的是不同的JSX（JavaScript XML）語法。雖然，它并不要求在應用中使用JSX，但您必須熟悉React的設(shè)置、環(huán)境和架構(gòu)。

在這種情況下，Angular就是一種不錯的選擇。您可以輕松地在市場上找到Angular開發(fā)人員。同時Angular擁有著大量的項目、更新和資源社區(qū)，并且能夠持續(xù)下去。

您喜歡JSX還是HTML？

這是一個無休止的爭論。Angular使用的是HTML，而React則使用著JavaScript。請記住，這三種框架都是基于組件的。您可以跨應用去按需重用組件。根據(jù)官方文件，JSX 既不是字符串，也并非HTML。它允許開發(fā)人員創(chuàng)建React元素，同時它是JavaScript的一種語法擴展。

使用React的優(yōu)點在于JavaScript比HTML更強大，它是一種為前端開發(fā)定制的、相當易于維護的成熟語言。不同于另兩種框架，Vue更關(guān)注點分離(Separation of Concerns,SoF)，開發(fā)人員能夠用它來順次編寫樣式、腳本和其他內(nèi)容。因此，它更適合于那些初學者、設(shè)計師、和熟悉HTML的，經(jīng)驗豐富的開發(fā)人員。

注：通過Babel插件，您可以在Vue中使用JSX。

框架與庫的區(qū)別

Angular是一種框架，它為建立完整的安裝應用程序提供了一個良好的開始。您不必查看各種庫、路由方案和其具體結(jié)構(gòu)，就能快速地開始構(gòu)建。而在另一方面，React和Vue卻比Angular更具靈活性和普遍性。

運用React，您可以實現(xiàn)配對、交換等多種集成方式，也可以將各種庫與其他外部工具進行整合。可見，React的靈活性實現(xiàn)了開箱即用（out of the box）式的無縫集成。不過也正是因為該特點，React錯誤的幾率、以及依賴項也就更多。

相對而言，Vue是最純凈的框架。它通過內(nèi)部依賴性、和靈活性的***平衡，有助于提高您的代碼效率。它是一種旨在簡化Web開發(fā)的非常簡單、且直接易用的JavaScript框架。

其他需要考慮的重要方面

Angular會涉及到依賴注入（Dependency Injection），即一個對象為另一個對象提供各種依賴。這將使得代碼能夠更加簡潔，更加易懂。另一方面，Angular是基于MVC架構(gòu)的，而MVC模式會將項目拆分成模型、視圖和控制器三種不同的組件。不過，React并沒有此類概念，它只被用于為應用程序構(gòu)建視圖。

性能方面，哪個更好？

React和Vue都具有虛擬文檔對象模型（Virtual DOM），而Virtual DOM有著性能方面的優(yōu)勢。憑借著良好的結(jié)構(gòu)，Vue在性能和內(nèi)存分配方面表現(xiàn)不俗。React緊隨其后，而Angular則此局勝出。

由于性能取決于各種因素，這里的三種框架實際上已經(jīng)比其他JavaScript框架要快得多了。因此，鑒于應用程序本身的大小和代碼的優(yōu)化程度不同，您不應該僅從性能方面下結(jié)論。

原生應用程序的開發(fā)

一般原生應用程序是為某個特定平臺所構(gòu)建的。您可以使用React Native為iOS和Android開發(fā)原生應用。而Angular的NativeScript已被原生應用所采用，特別是Ionic框架已經(jīng)被廣泛地運用在制作混合應用等方面。

不過，Vue的Weex平臺正在開發(fā)之中，而且目前看來尚無下一步使之成為全面跨平臺的計劃。

哪個平臺提供了簡單的學習曲線？

Angular和React都有著自己的一套處理方式，而Vue則相對簡單一些。這也就是為什么許多公司都轉(zhuǎn)向Vue的原因。在使用Angular或React進行開發(fā)前，我們需要具有扎實的JavaScript知識，而且經(jīng)常需要對第三方庫做出選擇。

如果您的應用程序體積較大，在Vue中涉及到了大量代碼的話，那么不僅是編碼，包括調(diào)試和測試都可能會碰到，由于在其中使用了老式的JavaScript實現(xiàn)方式所帶來的問題。

另外，Angular能夠提供相當翔實且清晰的錯誤信息，以幫助開發(fā)人員解決各種問題。

單向數(shù)據(jù)流與雙向數(shù)據(jù)綁定

雙向數(shù)據(jù)綁定是指將UI字段動態(tài)地綁定到模型上的一種機制。當UI的各種元素發(fā)生變更時，其模型數(shù)據(jù)將相應地發(fā)生變化。另一方面，單向數(shù)據(jù)流則意味著只有單一的數(shù)據(jù)來源--模型。應用程序的數(shù)據(jù)遵循同一方向流動，只有模型才能更改應用程序的狀態(tài)。這是React和Angular的主要區(qū)別之一。

顯然，單向數(shù)據(jù)流不但易于理解，而且具有確定性；而由于雙向數(shù)據(jù)綁定的復雜性，它不但難以被理解，而且在實現(xiàn)上也有一定的困難。

因此在此方面，Angular使用的是雙向數(shù)據(jù)綁定，React用的是單數(shù)據(jù)流的，而Vue則支持兩者。此處重點在于：Angular的雙向方法提供了高效的編碼結(jié)構(gòu)，從而方便了開發(fā)人員的發(fā)現(xiàn)和使用。而React針對數(shù)據(jù)的單向管理，提供了更好的概述和理解。

微應用和微服務的興起

目前，微應用和微服務技術(shù)正方興未艾。React和Vue的靈活選擇性，對于應用程序來說是非常重要的。在React和Vue環(huán)境中，您只需要將各種庫添加到源代碼之中便可。

由于Angular使用的是TypeScript，因此它更適合于單頁Web應用（single page web application，SPA），而非微服務。相反，React和Vue的靈活性更適合微應用和微服務的開發(fā)。

***應該如何選擇？

如果您追求靈活性勝過功能性的話，請使用React。

如果您喜歡在編碼中使用TypeScript的話，請使用Angular。

如果您是個JavaScript愛好者的話，請根據(jù)JavaScript來選擇使用React。

如果您是個整潔的代碼控，請在應用程序中使用Vue。

Vue提供了最簡單的學習曲線，因此它是初學者的理想選擇。

如果您想在應用程序中關(guān)注點分離(Separation of Concerns)，請使用Vue。

如果您喜歡面向?qū)ο蟮木幊?，那么Angular絕對是您的***選擇。

另外，Vue往往是一些小團隊和小項目的理想選擇。如果您的應用程序體積較大，而且有著未來的擴展計劃，那么請選擇React或Angular。

對于跨平臺應用程序的開發(fā)而言，React Native是個不錯的選擇，因為它提供了各種現(xiàn)代化的功能，您可以輕松地找到對應的資源。而對于Angular來說，您需要擁有對 于JavaScript的全面知識，以構(gòu)建出各種大規(guī)模的應用。

React、Angular、Vue.js的比較速覽

綜上所述，我們在不偏向任何一種框架的前提條件下，向您展示了三種框架的對比，相信總有一款能夠滿足您的要求。如果我們在文中遺漏了任何要點或概念，請在下方通過留言和評論的方式告訴我們。謝謝！

原文標題：React vs. Angular vs. Vue.js: A Complete Comparison Guide，作者：Ankit Kumar

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】