【51CTO.com快譯】對(duì)于開發(fā)人員而言，選擇技術(shù)棧有時(shí)是一件相當(dāng)棘手的任務(wù)。因?yàn)槟枰C合考慮諸如：預(yù)算、時(shí)間、應(yīng)用大小、最終用戶、項(xiàng)目目標(biāo)、以及可用資源等多方面因素。

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

讓我們開始吧

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

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

React、Angular與Vue的對(duì)比

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

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

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

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

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

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

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

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

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

流行與市場(chǎng)趨勢(shì)

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

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

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

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

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

社區(qū)支持和增長(zhǎng)

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

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

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

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

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

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

您喜歡JSX還是HTML？

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

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

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

框架與庫(kù)的區(qū)別

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

運(yùn)用React，您可以實(shí)現(xiàn)配對(duì)、交換等多種集成方式，也可以將各種庫(kù)與其他外部工具進(jìn)行整合?？梢?，React的靈活性實(shí)現(xiàn)了開箱即用（out of the box）式的無縫集成。不過也正是因?yàn)樵撎攸c(diǎn)，React錯(cuò)誤的幾率、以及依賴項(xiàng)也就更多。

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

其他需要考慮的重要方面

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

性能方面，哪個(gè)更好？

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

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

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

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

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

哪個(gè)平臺(tái)提供了簡(jiǎn)單的學(xué)習(xí)曲線？

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

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

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

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

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

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

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

微應(yīng)用和微服務(wù)的興起

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

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

***應(yīng)該如何選擇？

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

如果您喜歡在編碼中使用TypeScript的話，請(qǐng)使用Angular。

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

如果您是個(gè)整潔的代碼控，請(qǐng)?jiān)趹?yīng)用程序中使用Vue。

Vue提供了最簡(jiǎn)單的學(xué)習(xí)曲線，因此它是初學(xué)者的理想選擇。

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

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

另外，Vue往往是一些小團(tuán)隊(duì)和小項(xiàng)目的理想選擇。如果您的應(yīng)用程序體積較大，而且有著未來的擴(kuò)展計(jì)劃，那么請(qǐng)選擇React或Angular。

對(duì)于跨平臺(tái)應(yīng)用程序的開發(fā)而言，React Native是個(gè)不錯(cuò)的選擇，因?yàn)樗峁┝烁鞣N現(xiàn)代化的功能，您可以輕松地找到對(duì)應(yīng)的資源。而對(duì)于Angular來說，您需要擁有對(duì) 于JavaScript的全面知識(shí)，以構(gòu)建出各種大規(guī)模的應(yīng)用。

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

綜上所述，我們?cè)诓黄蛉魏我环N框架的前提條件下，向您展示了三種框架的對(duì)比，相信總有一款能夠滿足您的要求。如果我們?cè)谖闹羞z漏了任何要點(diǎn)或概念，請(qǐng)?jiān)谙路酵ㄟ^留言和評(píng)論的方式告訴我們。謝謝！

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

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