2021前端框架選哪個？Vue，React 還是 Angular？

Web 前端開發是時下最熱門的領域之一，為了提升開發效率和用戶體驗從而創造更具競爭力的產品，選擇適合自己項目或團隊的開發框架成為技術決策者首先需要解決的問題。那么2021前端框架選哪個？Vue，React 還是 Angular？下面我們一起來看看吧。

但是近年來隨著技術和開發理念的發展和進步，前端開發框架也在不斷迭代。在眾多選擇面前，如何甄別各個框架的特長和短板？如何判斷其技術架構是否適合自己？

本文嘗試從多個角度分析市面上主流的前端框架，試圖為你的選擇提供一些參考。

前端框架的流行度

從上圖 Stack Overflow 的數據可以看出近十年來前端框架流行程度的變化。

從 2016 年開始，React 和 Angular 被人們學習和討論的越來越多。而曾經輝煌一時的 jQuery 逐漸沒落，但還仍有一定的群眾基礎。

Vue 雖起步較晚，但是增長勢頭很強勁。

截止到2020年末，Github 上的 Star 數量也從側面印證了 Vue、React、Angular 的流行程度。毫無疑問 React、Vue 和 Angular 仍將是 2021 年最受青睞的三款開發框架。

jQuery 有許多支持者，而且近期也有很不錯的用于支持移動端開發的進展。但從本質上講它仍是一款用于處理 DOM 和 CSS 并提供交互動畫的庫。

在開發大型應用、高級 JavaScript 特性支持 、可重用組件以及更少量的編碼方面，仍舊與現代框架有不少的差距。

其他的框架，無論是從用戶量還是社區發展的角度看和 React、Vue 和 Angular 都有很大的差距。

React、Vue 和 Angular 介紹

采用的網站：Airbnb、Facebook、Netflix …

React?最初是 Facebook 為滿足其產品需求而開發的，于 2013 年向受眾展示并開源。其虛擬 ?DOM 技術（virtual Document Object Model）大幅提升了頁面的渲染性能和表現力。

對于那些想要構建穩定、高效的單頁面應用程序（single-page application）的項目來說 React 是個不錯的選擇。

采用的網站：PayPal、Google、Autodesk …

Angular 是谷歌支持的用于構建用戶界面的開源框架，它的歷史最早可以追溯到2010年正式發布的AngularJS。后期開發團隊將 AngularJS 基于 TypeScript 重寫，于 2016 年 9 月發布了 Angular 2 以適應日益增長的Web需求。為了避免混淆，新框架名稱去掉了 “JS”。

Angular 是一個大而全的開發平臺，也是一個完整的技術體系，非常適合大型復雜項目的開發和維護。

采用的網站：Gitlab、Behance、Alibaba …

Vue 是由前 Google 員工 Evan You 于 2014 年開發的。它具有平緩的學習曲線，只需要有 HTML、CSS 和 JavaScript 的基礎就可以很快上手，官方文檔也很細致和全面。這在注重快速迭代、小步快跑的互聯網大環境中尤為重要。

設計哲學

React

React 提供了一個輕量級的 DOM 渲染庫，旨在以一種高效和可重用的方式創建組件和子組件。它引入了 JSX 的語法，通過在 JavaScript 代碼中嵌入 “HTML 元素” 實現在組件層面的關注點分離。

React 主張更大的靈活性，因此除了核心的 DOM 渲染庫，官方并沒有提供更多的例如狀態管理和路由等類庫的支持。

好在 React 擁有龐大且專業的社區，貢獻了大批像 react-redux、react-router 這樣強大的第三方類庫，在其中你總能找到適合自己的解決方案。

Angular

Angular 提供了三個框架中最多的功能，如用戶界面控制、用戶輸入處理、表單驗證、狀態管理、路由、測試、PWA 等等。

因此 Angular 更像是一個平臺，它提供了一套工具集，覆蓋了幾乎所有開發周期內可能出現的問題。

Vue

Vue 的核心庫只關注視圖層，它提供的類庫和工具比 React 多（CLI、 狀態管理和路由的支持），但相比 Angular 更少。

Vue 是漸進式的，被設計為可以自底向上逐層應用。Vue 的一個特色是使用文件擴展名為 .vue 的 single-file components (單文件組件)?，可以在一個文件中同時處理 HTML、CSS 和 JavaScript。

小結

React 主張靈活性，相對的就丟失了確定性，Angular 滿足了確定性，但又不夠靈活。這本身就是在事物的不同方面做取舍。

Vue 似乎兼容了確定性和靈活性，并且提供漸進式的支持，但是過高的自由度帶來的是不夠穩定和健壯。

誰的設計更好？這可能是個難以回答的問題。不同的團隊、不同的需求，所側重的方向也不盡相同。

語法風格

React

React 使用 JSX 將 JavaScript 和 HTML 結合在一起，在構建項目的時候 JSX 會被編譯為常規的 JavaScript 和 HTML 代碼。

下面是 React 的 Hello World 組件代碼。

importReactfrom”react”functionHelloWorld(props){return

Hello World

}exportdefaultHelloWorld

你可以通過 JavaScript 函數創建 React 組件，在返回值中使用 JSX 呈現視圖內容。

Angular

Angular 使用 TypeScript 作為開發語言。他是 JavaScript 的超集，在面向對象、類、接口、靜態類型檢查等方面提供了更全面的支持。

Angular 會將 TypeScript 項目編譯為與瀏覽器兼容的 JavaScript 代碼。

你可以用如下的方式編寫 Angular 組件。

import{?Component?}from’@angular/core’;@Component?({selector:’my-app’,template:`<h1>Hello World</h1>`,})exportclassAppComponent{}

Angular 負責在幕后將你定義的組件，轉換為真實的 DOM。

Vue

Vue 使用普通的 JavaScript 語法，對于新手而言很友好。

newVue({el:’#app’,? data: {message:’Hello Vue.js!’? }})

小結

三個框架都是基于組件來構建功能模塊和界面。

React 和 Angular 都有自己的主張的技術棧（JSX、TypeScript）因此有更陡峭的學習曲線，而在這方面 Vue 則沒有過強的主張，更易上手。

但 React 和 Angular 也正是因為有自己的主張，才使得自身能夠支持更加先進和高級的特性。

因此，討論誰的語法風格更優秀似乎并沒有什么意義，適合自己的就是最好的。

優勢與不足

一番對比下來，似乎并沒有什么堅實的理由來選出一款最優秀的框架，它們都有自身的特色。

正因如此，我們不妨將他們的優勢和不足統統羅列出來，相信會有更大的參考價值。

React

優勢

采用虛擬 DOM?大幅提升頁面性能和一致性。

擁有強大的瀏覽器端開發工具，對于提升開發和調試的效率至關重要。

龐大的社區生態，使你總是能夠找相關問題的解決方案。

單向數據流能防止很多錯誤，并且有助于調試工作。

可重用的組件從某種程度上來說簡化了開發工作，提升了效率。

可以方便的使用 React-Native 開發移動端 Web 應用。

不足

不完整，官方僅提供 MVC 模型的視圖（View）部分，因此你不得不選擇其他的第三方庫。

React 的發展速度非?？?，這意味著你現在學習的特性很可能在以后被遺忘，你必須時刻跟隨它的腳步。

相對來講 React 的文檔可能不是很全面。

React 生態主張函數式編程和 JSX 語法特性，對于不熟悉相關技術的新手，上手難度較大。

Angular

優勢

Typescript – 相比較 JavaScript 而言是更健壯的語言，有利于寫出高效和可維護的代碼。

指令?– 作為 HTML 的擴展，指令可以讓工程師輕松地創建動態且豐富的內容。

依賴注入使組件更易于重用，更易于管理和測試。

雙向數據綁定可以使工程師減少開發的時間。

基于組件的體系結構，有利于提供可重用的高質量代碼。

強大的社區支持，包含全面的文檔、討論和第三方工具。

不足

將舊的系統從 AngularJS 遷移到 Angular 需要一定時間。

從某種程度來說，Angular 系統顯得冗長和復雜。

Angular 是一套完整的前端解決方案，有很陡峭的學習曲線。

使用真實的 DOM ，對于動態 Web 內容的加載在性能上會受到些許的影響。

Vue

優勢

具有平緩的學習曲線，對于新手開發者非常友好。

在單個文件中分離關注點，程序開發更便捷，可讀性更強。

和 React 一樣，具有虛擬 DOM 帶來的高渲染性能和一致性的優勢。

和 Angular 一樣支持雙向數據綁定，數據更新和追蹤更直接。

可重用組件，對于簡化開發工作、提升開發效率至關重要。

生態系統完善，官方提供狀態管理和路由庫的支持。

出現時間較晚，吸收了 React 和 Angular 的優勢，增長迅速。

不足

雙向數據綁定可能會帶來一些問題。

對比 React 和 Angular，Vue 背后沒有大型企業的支持。

對較舊版版本的?Safari 支持會出現一些問題。

過高的靈活性通常會引入更多的錯誤以及編碼的不規范。

社區中文化程度較高，對于英文用戶來講很難學習。

結論

下圖總結了 Vue、React 和 Angular 三個框架在集成度、學習曲線、性能和主張方面的表現。

當你需要在很短的時間內快速構建一個健壯的交互式單頁應用，React 會是一個穩妥的選擇。但是如果你缺乏對 JavaScript 的掌控，React 則不是很合適，因為 JSX 有一定的學習難度。

對于構建大型復雜的企業級的應用，使用 Angular 是最好的選擇。但同樣因為它龐大的體系，Angular 并不適合構建簡單的小型應用。尤其是當你的團隊規模較小時，選擇一個低復雜度和語法簡單的框架會好很多。

當你需要一個靈活的架構，以便于從頭開始設計所有內容，Vue 是值得被推薦的。但與此同時你需要在組件穩定性和它所帶來的便利性之間做權衡。

這三個框架都有各自的優點和缺點，要做選擇的確不是一件簡單的事。但是，如果你明確了自己真正需要的和真正不能接受的，那么相信你的心中已經有答案了。

—

圖片來源：

封面, simform.

參考資料：

[1]?https://cn.vuejs.org/v2/guide/index.html
[2]?https://react.docschina.org/docs/hello-world.html
[3]?https://angular.cn/docs
[4]?https://www.educative.io/blog/react-angular-vue-comparison
[5] https://www.simform.com/best-frontend-frameworks/

文｜張旭
來源 | 靈感發生器(id: top_zhangxu)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。