【51CTO.com快譯】對(duì)于任何應(yīng)用開(kāi)發(fā)型團(tuán)隊(duì)來(lái)說(shuō)，他們時(shí)常捫心自問(wèn)的話題是：“我們應(yīng)該選擇哪種前端(客戶端)開(kāi)發(fā)技術(shù)呢?”目前，由于市面上有林林總總的JavaScript框架，它們分別適用于不同的技術(shù)實(shí)現(xiàn)場(chǎng)景，其自身的功能和界面友好程度也是參差不齊，因此您的應(yīng)用開(kāi)發(fā)團(tuán)隊(duì)往往需要謹(jǐn)慎地做出自己的選擇。

本文將和您一起探究React、Angular和Vue三種前端架構(gòu)的不同優(yōu)劣勢(shì)，以及各自適用的使用場(chǎng)景。

什么是Angular?

Angular是Google提供的一種開(kāi)源的前端Web應(yīng)用程序框架。通過(guò)其模型-視圖-控制器(MVC)式的架構(gòu)，開(kāi)發(fā)人員能夠輕松地進(jìn)行各種開(kāi)發(fā)、維護(hù)和測(cè)試。它不但適用于構(gòu)建具有高活躍性和交互性的Web應(yīng)用場(chǎng)景，還廣受單頁(yè)面式應(yīng)用程序(https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)的歡迎。

上圖是最新的Angular發(fā)布周期表。

什么是React?

由Facebook帶來(lái)的React是一個(gè)開(kāi)源的JavaScript庫(kù)。它可以被用于構(gòu)建交互式、有狀態(tài)、且可重用的用戶界面(UI)。而這些正是呈現(xiàn)具有高性能、且復(fù)雜的UI的基本功能要求。同時(shí)，它可以與虛擬化的文檔對(duì)象模型(DOM)協(xié)同使用，以提供高穩(wěn)定性的Web應(yīng)用程序。

上圖是React Native的英文釋義。

什么是Vue?

Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。它自帶有各種可用于構(gòu)建用戶界面的備選工具。通過(guò)與各種現(xiàn)代化的工具(https://vuejs.org/v2/guide/single-file-components.html)、以及軟件支持庫(kù)(https://github.com/vuejs/awesome-vue#components--libraries)的聯(lián)合使用，Vue能夠全面支持復(fù)雜的單頁(yè)面式應(yīng)用程序。

受歡迎的程度

下圖是Google根據(jù)搜索熱度，制作的有關(guān)這三種前端框架接受程度的走勢(shì)分析圖。可見(jiàn)，在2016年之前，Angular是非常受歡迎的。但是從2017年開(kāi)始，開(kāi)發(fā)人員對(duì)于React的搜索頻率呈穩(wěn)定增長(zhǎng)的趨勢(shì)。

Stackoverflow(譯者注：開(kāi)發(fā)者在線社區(qū))同樣用下面的圖展示了三者歷年來(lái)的流行趨勢(shì)。AngularJS在2015年至2016年間最為流行，而React的流行勢(shì)頭則在逐年有著顯著的攀升。

近年來(lái)，隨著React、Angular和Vue的持續(xù)迭代與更新，它們不但新增了不少新的功能，而且為各類Web應(yīng)用程序提供了更好的可靠性與穩(wěn)定性。

Angular、React和Vue之間的區(qū)別

上述表格簡(jiǎn)單扼要地概括了Angular、React和Vue在類型、體積、上手難度、編碼速度、配套文檔、性能、啟動(dòng)時(shí)間、應(yīng)用完成度、呈現(xiàn)方式、類型、代碼重用性、以及適用場(chǎng)景等方面的區(qū)別。

AngularJS的優(yōu)勢(shì)

• 無(wú)論用戶使用的是何種平臺(tái)，基于Angular構(gòu)建出的Web應(yīng)用程序都能夠運(yùn)行在任何一種瀏覽器的環(huán)境之中。
• 如下圖所示的雙向(Two-way)數(shù)據(jù)綁定，能夠確保只要模型中出現(xiàn)任何數(shù)據(jù)的變更，都會(huì)立即反映到視圖之中。與此同時(shí)，當(dāng)視圖中的數(shù)據(jù)發(fā)生變化時(shí)，模型也會(huì)做相應(yīng)的更新。

• 預(yù)先構(gòu)建好的材料設(shè)計(jì)組件，能夠幫助用戶的移動(dòng)/網(wǎng)絡(luò)應(yīng)用，構(gòu)建出具有高度互動(dòng)特性，且易于導(dǎo)航的UI。
• Angular的命令行界面可以保證第三方輕松地更新組件，并減少了創(chuàng)建和部署應(yīng)用程序的時(shí)間。

React的優(yōu)勢(shì)

• 虛擬化的DOM能夠幫助React開(kāi)發(fā)人員輕松地獲悉應(yīng)用程序中的任何修改，而且保證不會(huì)影響到界面的其他部分。
• React允許用戶重用其各種組件，以便更容易、更高效地開(kāi)發(fā)出新的應(yīng)用程序。
• 在大型應(yīng)用程序中，React通過(guò)使用Redux(https://redux.js.org/basics/usage-with-react)來(lái)簡(jiǎn)化各種組件狀態(tài)的存儲(chǔ)和管理。
• 由于數(shù)據(jù)只會(huì)向著一個(gè)方向流動(dòng)，因此單向(Unidirectional)數(shù)據(jù)綁定能夠使得代碼既穩(wěn)定，又便于未來(lái)的后繼開(kāi)發(fā)。

Vue的優(yōu)勢(shì)

• Vue的最大優(yōu)勢(shì)之一就是其體積比較小。
• 它自帶有非常詳細(xì)的文檔。
• 它允許開(kāi)發(fā)人員使用虛擬節(jié)點(diǎn)，在HTML文件、JavaScript文件和純JavaScript文件中編寫模板。
• 它的MVVM(譯者注：Model-View-View-Model)架構(gòu)能夠讓用戶輕松地處理各種HTML程序塊。

選擇合適自己的框架

性能

性能是考核前端應(yīng)用程序最重要的方面之一，特別是那些HTML頁(yè)面。由于React和Angular采用了完全不同的HTML更新方法，因此它們會(huì)對(duì)應(yīng)用程序的性能產(chǎn)生不同的影響。

鑒于瀏覽器中DOM的直接變化，Angular最適合于單頁(yè)面式的應(yīng)用程序，畢竟此類應(yīng)用只會(huì)偶爾更新頁(yè)面上的內(nèi)容。而對(duì)于那些需要定期更新內(nèi)容，且體積大小不定的應(yīng)用程序(例如Instagram)來(lái)說(shuō)，React會(huì)更加適合。

就Vue.js的性能而言，由于它的核心庫(kù)只集中在視圖層，因此很容易與其他庫(kù)、或現(xiàn)有的應(yīng)用程序相集成。另外，Vue.js還會(huì)通過(guò)虛擬化的DOM，來(lái)提供較高運(yùn)行的性能和內(nèi)存配比。

開(kāi)發(fā)的速度

盡管開(kāi)發(fā)人員能夠輕松地使用React和Angular來(lái)對(duì)程序進(jìn)行修改，但是應(yīng)用程序的實(shí)際開(kāi)發(fā)速度仍然取決于開(kāi)發(fā)人員具體用到的功能庫(kù)數(shù)量。通常，React的架構(gòu)比Angular更易于擴(kuò)展，而Angular開(kāi)發(fā)Web應(yīng)用程序的速度比React更快一些。

雖然這三種架構(gòu)都是用戶交互和復(fù)雜UI呈現(xiàn)方面的上乘選擇，但是，如果您希望程序的修改能夠產(chǎn)生立竿見(jiàn)影的效果，那么Vue則是一個(gè)好選擇。它能夠?qū)崿F(xiàn)從原型到產(chǎn)品的輕松轉(zhuǎn)換。

應(yīng)用的體積

Angular保留了最簡(jiǎn)化可行產(chǎn)品(Minimum Viable Product，MVP)所需的必要部分，并能夠在此基礎(chǔ)上產(chǎn)生功能齊全的單頁(yè)應(yīng)用程序。因此，如果您想通過(guò)調(diào)整體積大小，使得應(yīng)用程序更為小巧緊湊的話，那么Angular將是您的最佳選擇。而如果您希望將來(lái)以橫跨多個(gè)操作系統(tǒng)的方式擴(kuò)展應(yīng)用程序的話，React則是您的不二選擇。

由于Vue的核心庫(kù)主要專注于靈活性，因此Vue能夠適合于任何規(guī)模的應(yīng)用程序。其中包括：?jiǎn)我晃募M件、高模塊化的組件接口、以及帶有Vue CLI3的各種平臺(tái)等。那么，如果您將其用到中等復(fù)雜程度的單頁(yè)面應(yīng)用，或是較大規(guī)模的程序，特別是那些包含多頁(yè)面的導(dǎo)航時(shí)，那么Vue的實(shí)現(xiàn)效果相對(duì)會(huì)更好一些。

下圖是三大JS框架的典型用戶與流行應(yīng)用列表：

結(jié)論

綜上所述， Angular是一款較為全面的框架。不過(guò)，開(kāi)發(fā)人員不一定會(huì)用到Angular所提供的大多數(shù)功能。

React為用戶提供了各種靈活性和簡(jiǎn)便性。Reactjs采用了虛擬化的DOM實(shí)現(xiàn)方式，因此它具有比Angular更好的性能。

而作為一個(gè)漸進(jìn)式的框架，Vue可以被用戶合并到現(xiàn)有的項(xiàng)目中。它自帶有大量的工具和配套庫(kù)，可以響應(yīng)企業(yè)級(jí)的應(yīng)用所涉及到的各種復(fù)雜需求。另外，憑借著Vue CLI 3和Vue UI，它能夠快速地交付出MVP。因此，Vue可謂中小型應(yīng)用程序的一種經(jīng)濟(jì)且高效的解決方案。

原文標(biāo)題：React vs. Angular vs. Vue: The Complete Comparison，作者：Anand Mahajan

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