[[405458]]

【51CTO.com快譯】作為重要的業務支柱，我們在選擇使用Web開發技術時，往往需要考慮待選技術在各個方面的優缺點。目前，無論是創業公司、還是獨立軟件提供商(ISV)，普遍都會從AngularJS、React JS、以及Vue.js三個常用技術中進行挑選，畢竟它們都有著優秀的社區支持。為了進一步讓您全面了解這三者之間的區別與優缺點，下面我將詳細為您介紹與比較AngularJS、React JS和Vue.js。

市場份額占有比較

根據如下圖給出的谷歌(Google)趨勢分析結果，Vue.js的市場占有份額最高，React JS次之，AngularJS最少。當然，這只能說明三者的普及與使用程度，而并不能直接體現到底哪一種技術絕對優秀。下面讓我們進一步來討論他們在技術應用上的不同特點。

一、AngularJS

AngularJS是由谷歌開發，并于2009年推出的一個開源框架。自誕生以來，它便具有良好的開發者支持社區。作為一個全球流行、且十分高效的Java框架，它被認為是最好的、且可用于創建交互式網站的技術。其結構性的框架設計，特地簡化了前端網站的整個開發過程。

AngularJS框架的流行主要得益于它使用了HTML模板語言。HTML雖然是一種針對文檔的、優秀的聲明性語言，但是它在開發應用程序方面不算高效。此外，此類先進的框架還允許同一個Web頁面上的不同元素被修改。

AngularJS的商用價值

1. 優化安全

如今，說服一個企業采用新技術的最有效原因莫過于應用安全。在啟用新技術的過程中，企業往往擔心是否會因為應用程序中的某個安全漏洞，而導致所有關鍵性數據遭遇泄漏。為此，AngularJS使用各種Web服務或RESTful API，作為HTTPS的接口實現數據在服務器端的各種交互。該標準通過和現有安全措施的協同工作，能夠保護Web應用遠離各種惡意軟件、以及未經授權的訪問。

2. 無縫的訪問管理

顯然，業務數據不是任何人都可以隨意訪問到的。AngularJS通過各種補充庫，憑借著單點登錄(single sign-on，SSO)實現了對于受限訪問的管控。

3. 加速開發

開發互動式的網站往往是一個費時的過程。AngularJS可以讓開發者節省雙向數據綁定的時間。它只需要少量的代碼，即可將數據保存到服務器上。此外，ng-model和ng-class兩個指令，也可以在jQuery中輕松地執行許多種類的數據庫相關操作。

4. 有效的測試

在Web開發過程中、以及完成之后，針對網站開展測試，以全面了解潛在的錯誤，并及時解決發現的問題，往往是一個必經的步驟。而AngularJS能夠提供一種優秀的依賴性注入功能，以測試每個組件的相互隔離。

5. 簡單的維護

我們常說完成了網站的開發并非項目的終點，后期對于網站的維護，同樣會需要花費項目團隊大量的時間和精力。AngularJS實踐了MVC方法，允許開發者開展各種面向對象的設計(object-oriented design)。由其開發的軟件或網站，則更易于得到維護和后期迭代。

AngularJS的缺點

• 由于它自帶有組件、注入表(Injectables)、管道、以及模塊等不同類型的結構，因此它比只帶有“組件”的React和Vue.js要更難學習。
• 在不同的基準下，AngularJS的執行都會相對較慢。當然，開發者可以利用其所謂的“變化檢測策略(Change Detection Strategy)”，來手動控制組件的呈現與渲染過程。

正在使用AngularJS的公司

Paypal、耐克、谷歌、Telegram、Weather、iStockphoto、AWS、Crunchbase、微軟、Autodesk、麥當勞、UPS、思科解決方案合作伙伴計劃、AT&T、蘋果、Adobe、GoPro、ProtonMail、Clarity Design System、Upwork、自由職業者、Udemy和YouTube。

二、ReactJS

在2013年被發布的ReactJS，通過臉書(Facebook)和開發者社區獲得了大量的支持。它主要被用于通過MVC(模型-視圖-控制器)，來開發移動和Web應用程序的用戶界面。開發人員通常使用該技術，來開發各種單頁面的Web應用，以及使用其他庫，來為他人開發的Web應用提供補丁式的支持。

ReactJS的商用價值

1. 更高的代碼穩定性

由于數據只能夠往一個方向流動，因此它提供了一種極好的代碼架構。當開發人員使用各種數據綁定技術時，其子結構的變化不會影響到底層的父結構。

2. 易于理解

對于JavaScript開發人員而言，他們只需掌握CSS和HTML的相關知識，即可快速上手ReactJS。同時，它為手機應用程序的開發，提供了比其他競品更多的便利性。

3. SEO友好

ReactJS可以通過允許搜索引擎抓取網站或移動應用，來提高在搜索引擎中的索引排名。由于React可以通過服務器展現常規的Web頁面，并將虛擬的DOM請求傳遞給瀏覽器，因此ReactJS方便了搜索引擎，去爬取那些重JavaScript(JavaScript-heavy)類型的應用程序。

4. 代碼組件的可重用性

Facebook通過增加獨有的代碼組件重用功能，簡化了開發的整體過程。它既可以節省項目組的開發時間，又能夠減少他們重復編寫相同代碼的工作量。同時，所有元素都是相互隔離的，某個元素的改變并不會影響到另一個元素。

5. 快速渲染

帶有虛擬DOM的ReactJS將有助于消除代碼呈現與渲染過程中的瓶頸，使之更為流暢。通過最少的工作量，開發人員能夠將虛擬DOM的更改應用到全部DOM上，進而節省了變更時間，并提高了DOM的整體性能。

ReactJS的缺點

• 作為一套UI組件，ReactJS通常可以和其他框架組合起來使用。但是它本身并不適合被單獨當作一個完整的框架。
• 其自帶的邏輯混合模板(JSX)常常會讓開發人員摸不著頭腦。
• 由于ReactJS移除了基于類的組件，因此不適合開發人員使用面向對象的編程(OOP)。畢竟它只一個視圖(view)層，而且它將HTML和JavaScript合到了一起。

正在使用ReactJS的公司

奈飛、愛彼迎、Storybook、臉書、Instagram、Whatsapp、Intercom、Atlassian、紐約時報、可汗學院、雅虎、Codecademy、Dropbox、Asana、微軟、以及Slack等。

三、VueJS

Vue也被稱為Vue.js。作為前端技術組中最年輕的成員，它是由前谷歌員工Evan于2014年推出的。近年來，它已經逐漸受到了開發者社區的高度關注與支持，并于今年4月份推出了最新的beta版。

VueJS的商用價值

1. 速度和性能

作為一個輕量級的框架，Vue.js只有20 kb，而React和Angular分別為143 gzip和43 kb。因此，Vue.js需要下載的時間更少，并且能夠提供一站式的服務。

2. 靈活性

Vue能夠適應諸如JavaScript、PHP等不同的環境與框架。您可以將它添加到一個已有多種技術的項目中，并為其創建組件。運用Vue的各種工具，您既可以從零開始創建網站，又可以構建一個本地應用。

3. 更快地成型

更快的產品原型往往意味著開發團隊能夠從客戶處盡早地獲悉各個反饋。而由于Vue具有易于被設置和進行編碼的特性，因此它相比其他框架，能夠最小化軟件產品的原型交付時間。

4. 簡單性

實際上，沒有哪個開發人員會真正喜歡復雜的架構。而Vue恰好可以讓項目團隊運用最基礎的HTML知識，通過簡單的代碼，更快速地開發出網站或軟件產品。與此同時，由Vue開發出的交付產品，也更易于維護，會帶有更少的代碼錯誤，以及實現更快的缺陷修復。

VueJS的缺點

• 缺乏資源——相對于AngularJS和ReactJS，Vue.js的市場和社區相對較小，這就意味著其框架目前仍處于有待優化的階段。
• 靈活性風險——有時候，在融入某個大型項目的過程中，Vue.js可能會碰到或者產生某些問題，而其對應的解決方案，可能需要耗費一段時間才能被發現。

正在使用Vue.js的公司

小米、阿里巴巴、Adobe，WizzAir、Codeship、Gitlab、Grammarly、Behance、以及路透社。

小結

總的說來，對于那些優秀的開發者而言，這些前端技術框架其實并無任何實質性的差異。他們可以輕松靈活地玩轉各種技術。不過，對于企業來說，他們需要全面考慮如下方面：

• 是否需要開發一個SEO友好的網站? 如果是的話，請選用ReactJS。
• 是否想讓網站帶有安全優化? 如果是的話，AngularJS值得信任。
• 是否需要開發一個輕量級的Web應用程序? 如果是的話，請選用VueJS。
• 是否想用更少的時間完成Web開發過程? 如果是的話，請選用AngularJS。

可見，只要能夠理清上述問題，并分清主次，我們就不難從AngularJS、ReactJS、以及VueJS，這三個框架中做出明智的、且滿足業務需求的正確選擇。

原文標題：AngularJS Vs. ReactJS Vs. VueJS: A Detailed Comparison，作者：Sneha Das

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