Angular、React 和 Vue 三大框架，Web 開發該如何選擇？

作者 ｜ Northell

譯者 ｜ 平川

策劃 ｜ 田曉旭

隨着社交媒體和用戶生成內容的爆炸式增長，互聯網正在向更好的方向發展。爲了跟上時代發展的步伐，提供更好的交互性，開發人員開始構建庫和框架來簡化交互式站點的構建。2006 年，John Resig 發佈了 jQuery，使得在 HTML 中編寫客戶端腳本變得更加容易。隨着時間的推移，其他類似的項目出現了。剛開始，它們是一個龐大的單體，而且把項目的構想強加給開發者。現在，這些庫已經開始向緊湊型輕量級庫轉變，可以非常容易地添加到任何應用程序中。讓我們來看看其中最受歡迎的三個。

1JavaScript 框架概覽

開始一個新項目總是要做許多決定。其中一個關鍵決策就是選擇合適的框架或庫。幸運的是，Vue.js 是一個功能非常多樣化的庫，可以處理各種各樣的任務。

Vue.js

Vue.js 這個庫讓你可以將交互性和附加功能添加到任何使用 JavaScript 的編碼環境中。Vue 既可以在單獨的頁面上用來解決簡單的任務，也可以作爲成熟的工業應用程序的基礎。Vue.js 是一個用於構建圖形用戶界面的高級框架。它也可以與一些現代工具和附加庫一起，用於構建複雜的單向應用程序。

Vue 庫其中一個最大的優點是它不需要任何特殊知識。任何 Vue 應用程序都是使用 HTML、CSS 和 JavaScript 編寫的——熟悉這些工具就可以立即投入工作。即使你以前從未做過客戶端開發，也可以基於以前的 MVC 設計模式使用經驗進行構建，這種模式與 MVVM 非常相似。

React

藉助 React 庫，我們可以輕鬆地創建交互式用戶界面。集成 React 時，不需要更改當前項目的代碼，它只負責渲染界面，不會額外帶來痛苦。

React 系統支持用戶界面更新，使得爲應用程序創建健壯的模塊化組件更加容易。React 庫通過數據更新來實現大部分用戶界面維護工作，這對開發人員來說非常令人愉快（難怪它如此受歡迎）。

Angular

Angular 差不多是一個完整的開發環境。它包含一整套程序，包括 TypeScript 編譯器、AOT 編譯器和 Web 服務器。Angular 的 Web 服務器用於調試使用這個框架開發的站點。它是用同一個 Angular CLI 實用程序啓動的，要啓動 Angular CLI，你需要在 Windows 命令行中進入項目文件夾，並執行 ng serve 命令。

2Vue、React 和 Angular 的主要特徵

React 最大的其中一個優勢是：在穩定性和創新性之間做了很好的平衡，使得用戶比較容易適應。這個原因以及其他一些原因使 React 保持了它的地位，並獲得越來越多的人氣。

圖片來源：

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Cangularjs

大小

開發框架的大小對未來應用的性能至關重要。框架和應用程序必須在應用程序開始正常工作之前加載。

在這方面，Angular 最複雜，有 143KB。React 次之，有 43KB，而 Vue.js 只有 23KB。除非你的應用特別大，並且包含了大量的組件，否則最好使用更小的結構。

性能

在 Web 項目中，性能與 DOM 密切相關：DOM 在瀏覽器 / 代碼中表示 Web 頁面。在發生更新時，你可以通過 DOM 控制 Web 頁面。

Vue、React 和 Angular 的性能會因爲任務的不同而有所差異，但在大多數情況下，它們都非常高效和快速。React 和 Vue 都實現了 DOM。得益於其精心設計的結構，Vue 提供了出色的性能和內存分配。這就是 React 和 Vue.js 優於 Angular 的地方：它們利用了虛擬 DOM——原始 DOM 的複本。

注意：DOM 是一種將 HTML 文檔的內容表示爲對象的方法。此外，還有一個用於管理指定對象的接口。DOM 分常規 DOM（也稱爲真 DOM）和虛擬 DOM。它們有什麼區別呢？讓我們來看一個例子。如果你想修改在 HTML 標籤中找到的某些信息，算法將會這樣做：真正的 DOM 將更新所有標籤，直到它找到它需要的片段。在某些情況下，這會對性能和其他參數產生負面影響。虛擬 DOM 則只更新必要的 HTML 塊。

社區

React 是世界上最流行的框架，這已不是什麼祕密。它越來越受歡迎，因爲它提供了真正的 Promise。React 的 Mental Model 看起來很可靠，其組件讓創建用戶界面變得更容易，API 靈活且富有表現力，整個項目給人的感覺是就應該那樣。對 API 庫的描述也友好，更容易給人留下良好的印象。

從那時起，React 庫在基本概念和 API 方面就基本保持不變，但已經形成並發展出了一整套的知識和最佳實踐，越來越多的人在使用它。Angular 因其優點而備受讚譽，並擁有大量的社區支持。遺憾的是，儘管 Vue.js 有很多好處，但它並沒有像它的競爭對手那樣被開發者所接受。

下面讓我們從流行度和相關性兩個方面比較下這三個框架：

• GitHub：目前，Vue.js 是最流行的框架，儘管它是最年輕的，這意味着越來越多的項目將使用它。

• 谷歌搜索：在谷歌搜索中，React 查詢請求最多，緊隨其後的是 Vue.js。目前最不受歡迎的是 Angular.js。Angular.js 的人氣在下降，而 Vue.js 的人氣卻在上升。

• 勞動力市場需求：大多數職位空缺與 React.js 有關，然後是 Angular，再然後纔是 Vue.js。

3Vue、React 和 Angular：該選哪個？

爲了選出最合適的庫，你應該首先仔細分析這些框架並理解自己的需求。無論是有許多依賴項的現有項目，還是你想使用熟悉的庫進行開發的新應用程序，Vue 都不會給你帶來任何麻煩。你可以繼續使用 Bootstrap 或 Bulma 這樣的 CSS 框架，保留爲јQuery 或 Backbone 編寫的組件，集成你最喜歡的庫執行 HTTP 請求，或使用 Promise 對象。

要開始使用 Vue 進行編程，你所要做的就是將 Vue.js 庫連接到 Web 頁面。不需要複雜的組裝工具！從頭到尾開發一個原型只需要 1 到 2 周的時間，這讓你能夠儘早並經常地收集用戶反饋。Vue 2 引入了服務器端渲染（SSR）支持。這讓你可以最小化初期的數據加載，並根據需要請求新的視圖和資源。與高效的組件緩存相結合，可以進一步減少流量消耗。

React 庫能夠做一些令人驚歎的事情。因爲整個用戶界面都是用 JavaScript 定義的，所以你可以使用 JavaScript 的豐富功能在模板中執行各種操作。你只會受到 JavaScript 特性的限制，而不會受到模板框架特性的限制。當你想到完全用 JavaScript 定義的視覺效果時，你可能會想到很多引號、轉義字符和 createElement 調用。別擔心，React 庫允許你（選擇性地）使用可以與 JavaScript 代碼共存的 HTML-like JSX 語法定義可視元素。

React 與其他兩個框架在以下理念上有所不同：

• 與其說它是一個框架，不如說它是一個庫（最初是爲了處理 UI 而創建的）；

• 因爲它不受框架的限制，所以它的功能更多——更適合專業人士，而不是初學者；

• 在 Angular 中許多可以 “開箱即用” 的主要特性，在這裏必須單獨連接（這種方法有優點，也有缺點，對於初學者來說是缺點，因爲需要做不必要的動作）；

• 更多地面向 JavaScript 而不是 TypeScript（儘管每個版本對 TS 的支持都在增加）；

• 更便於創建原生 Android 和 iOS 移動應用程序；

• 擁有大量適用於各種場合的第三方庫（多於 Angular）。

Angular 已經被用在了許多規模最大、最複雜的 Web 應用程序中。

圖片來源：https://www.madewithangular.com/

Angular 借鑑了服務器端開發中的一些最佳特性，並用它們來擴展瀏覽器中的 HTML 標記。這樣，創建具有增強功能的應用程序就更簡單輕鬆了。Angular 應用程序基於 MVC 設計模式構建，這個模型致力於創建具有以下特徵的應用程序：

• 易於擴展：如果你理解了基礎知識，即使是最複雜的 Angular 應用，你也很容易就能夠理解，這意味着你可以很輕鬆地擴展應用來提供實用的新功能。

• 易於維護：Angular 應用程序很容易調試，Bug 很容易修復，這意味着長期運行的 Angular 應用也很容易維護。

• 測試工具：Angular 有良好的 go mod 和端到端測試支持。因此，你可以在用戶遇到之前找到並修復它們。

• 標準化：Angular 基於瀏覽器的內部功能，不會給你的工作帶來任何阻礙。這讓你可以創建符合標準的 Web 應用程序，包含最新的功能（例如，各種 HTML5 API）、流行的工具和框架。

• 這是一個框架——這意味着它設定了創建 Web 應用程序的規則，在初始階段設定了特定的框架，讓初學者可以少費腦筋。

• Angular 功能極多，如果需要額外的東西，可以連接第三方模塊。

4Vue.js VS React：雙向數據綁定

在 Vue 中，你可以輕鬆地將組件變量綁定到表單字段。當你更改變量時，表單字段會更新，當用戶更改表單字段時，組件變量也會更新。這比編寫 React 中的事件處理程序要容易得多。

此外，很多人喜歡用圖表展示框架的受歡迎程度，其中 React 是 Angular 的 2 到 3 倍。它從創建移動應用程序（React Native）中獲益頗多，因爲與 Angular Ionic 相比，它更方便。至於 Web 應用程序（ReactJS）開發方面，一切就沒那麼簡單了。

例如，對於 Web 應用程序，我發現，使用 Angular 比使用 ReactJS 更方便。

你可以自己嘗試並比較不同的方向或技術。爲此，你可以在谷歌趨勢中輸入一些關鍵字，它會爲你畫出漂亮的圖表。

5Vue.js vs React vs Angular

與之前的框架不同，Vue.js 是由一個人創建的，他認爲 2013 年已經有的框架都太複雜。Vue 的第一個和第二個版本都是由一個人創建的，因此，在某些方面，它可能比競爭對手更糟糕，尤其是在安全方面。Vue 3 是由一個開發團隊創建的，這意味着現在許多 Bug 和缺點都得到了修復，框架本身的效率也得到了提升。

6 我應該學習 React 還是 Angular？

最好同時學習 Angular 和 React。這兩種框架各有優缺點。專家建議初學者首先學習 Angular，因爲你所需的一切都是 “開箱即用” 的，這樣更不容易犯錯（框架會幫你控制）。在學習了 Angular 之後，你可以學習 ReactJS 和 React Native。另外，如果你只需要移動應用，你也可以直接跳到 React Native。事實上，你只需要學習框架的特性，僅此而已。其餘的知識都是通用的（OOP、TypeScript、RP）。學習框架本身 1 到 2 周就足夠了，你已經可以創建簡單的 Web 應用程序了。

7 結束語

顯然，這三個框架都非常強大，但同時又很不一樣。它們有自己的優勢和劣勢，沒有一個通用的公式可以用來決出一個絕對的贏家。選哪個框架好，要看你正在創建的應用程序和你的特定需求。在做決定之前有必要進行全面的研究。對於那些從事商業投資而不是單個項目的公司來說，這一點尤其重要。

原文鏈接：

https://northell.medium.com/react-vs-vue-vs-angular-what-to-choose-for-web-development-abc5565d3f11

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/7JUN826nTbxezZxxEMkPZw