大概就在幾年前，前端開發人員還在討論是否應該在專案中使用Angualr還是React。然而從2018年開始，情況有了變化，越來越多的公司開始對Vue。js感興趣，使用Vue。js的專案不斷增長。2020年已然來到，這三個框架應該如何選擇呢？這篇文章將會給正在決策的你一點點啟發。
Angular、React 和 Vue框架的簡單介紹
Angular
Angular由谷歌開發並於2010年首次釋出。它是一個基於TypeScript的JavaScript框架。2016年，Angular2的釋出發生了重大變化（並從最初的名稱AngularJS中刪除了“JS”）。Angular2+被稱為Angular。儘管AngularJS（版本1）仍有更新，但我們將重點討論Angular。最新的穩定版本是Angular9，於2020年2月釋出。
Vue。js
Vue，又稱Vue。js，是這三大框架中最年輕的成員。它是由前谷歌員工Evan You在2014年開發。在過去的三年裡，儘管Vue沒有大公司的支援，但它的人氣卻發生了巨大的變化。目前的穩定版本是2。6，於2019年2月釋出（此後有一些小的增量釋出）。Vue的貢獻者得到了Patreon的支援。目前處於alpha階段的Vue 3計劃轉移到TypeScript。
React
React由Facebook開發，最初於2013年釋出。Facebook在其產品（Facebook、Instagram和WhatsApp）中廣泛使用React。目前的穩定版本是16。X，釋出於2018年11月（此後有較小的增量更新）。
三個框架的熱度比較
由於“Angular”和“React”是常見的詞彙，很難從谷歌趨勢中把握它們的受歡迎程度。儘管如此，他們受歡迎的一個很好的代表是他們的GitHub儲存庫獲得的星的數量。2016年年中，Vue的星數量發生了顯著的變化，最近，Vue已經成為最受歡迎的框架之一。
GitHub中三個框架獲得星星的比較
三個框架在就業市場中的比較
從2018年末的趨勢來看，需要Angular技能或React技能的工作數量大致相同，而Vue的工作數量仍然只是這個數字的一小部分（約20%）。如果你嚴格地從當前就業市場的角度來看，你最好的選擇是學會Vue或React。然而，鑑於Vue在過去三年中越來越受歡迎，使用Vue的專案或採用Vue的新專案可能需要一些時間才能達到要求更多開發人員的成熟度級別。
Angular、React 和 Vue框架的社群資源
現在你已經熟悉了這些框架的歷史和趨勢，我們將檢視社群來評估這些框架的發展。我們已經看到，在過去的一年中，所有的框架都定期釋出增量版本，這表明開發正在如火如荼地進行。
讓我們看看Angular vs React vs Vue在GitHub儲存庫中的統計資訊：
Angular vs React vs Vue在GitHub儲存庫中的統計資訊
Vue有大量的觀察者，星星和叉子。這顯示了它在使用者中的受歡迎程度以及在比較Vue與React時的價值。然而，Vue的貢獻者數量低於Angular和React。
一種可能的解釋是，Vue完全由開源社群推動，而Angular和React在谷歌和Facebook員工中佔有相當大的份額，他們為程式碼庫做出貢獻。
Angular、React 和 Vue框架的遷移
在使用你選擇的框架時，不必擔心框架更新會出現並弄亂你的程式碼。儘管在大多數情況下，從一個版本到另一個版本不會遇到很多問題，但也要保持警惕，因為有些更新可能更重要，需要調整以保持相容。
Vue計劃每六個月更新一次。在任何主要的api被棄用之前還有六個月的時間，這給了你兩個釋出週期（一年）的時間來進行必要的更改。
談到Vue和React，Facebook曾表示，穩定對他們來說至關重要，就像Twitter和Airbnb等大型公司的反應一樣。透過版本升級通常是React中最容易的，React codemod等指令碼可以幫助你遷移。
在常見問題解答的遷移部分中，Vue提到，如果從1。x遷移到2，則90%的API是相同的。控制檯上有一個遷移幫助工具，可用於評估應用程式的狀態。
Angular、React 和 Vue框架的使用
這裡有幾個重要的特性需要考慮，主要是總體大小和載入時間、可用元件和學習曲線。
總體大小和載入時間比較
庫的大小如下：
Angular 4+：取決於產生的束尺寸
React：116 KB
Vue： 91KB
儘管這些框架的大小存在顯著差異，但與平均網頁大小（2018年為2+MB）相比，它們仍然很小。此外，如果使用流行的CDN載入這些庫，則使用者很可能已經在其本地系統中載入了庫。
可用元件比較
元件是所有三個框架的組成部分，不管我們是在討論Vue、React還是Angular。元件通常獲取一個輸入，並根據該輸入更改行為。這種行為變化通常表現為頁面某些部分的UI的變化。元件的使用使得重用程式碼變得容易。元件可以是電子商務網站上的購物車或社交網路上的登入框。
Angular
在Angular上，元件稱為指令。指令只是DOM元素上的標記，Angular也可以跟蹤和附加特定的行為。因此，Angular將元件的UI部分作為HTML標記的屬性進行分離，並將它們的行為以JavaScript程式碼的形式進行分離。這就是它在觀察角度和反應時的區別。
React
有趣的是，React結合了元件的UI和行為。例如，在React中建立hello world元件的程式碼。在React中，程式碼的同一部分負責建立UI元素並指示其行為。
Vue
在Vue中，UI和行為也是元件的一部分，這使得檢視Vue和React時更加直觀。此外，Vue是高度可定製的，它允許你從指令碼中組合元件的UI和行為。此外，你還可以在Vue中使用預處理器，而不是CSS，這是一個很好的功能。在與其他庫（如引導）整合時，Vue非常棒。
學習曲線比較
Angular
Angular有一個陡峭的學習曲線，考慮到它是一個完整的解決方案，掌握Angular需要學習相關的概念，如TypeScript和MVC。儘管學習角度感需要時間，但從理解前端工作原理的角度來看，投資是有回報的。
React
React提供了一個入門指南，可以幫助您在大約一小時內建立React。該文件是很詳細很完整的，對於堆疊溢位的常見問題已經有了解決方案。React不是一個完整的框架，高階功能需要使用第三方庫。這使得核心框架的學習曲線不是那麼陡峭，而是取決於您使用附加功能的路徑。然而，學會使用React並不一定意味著你在使用最佳實踐。
Vue
Vue提供了更高的可定製性，因此比Angular或React更容易學習。此外，Vue與Angular有重疊，並對其功能（如元件的使用）有反應。因此，從兩者中的任何一個過渡到Vue都是一個簡單的選擇。然而，Vue的簡單性和靈活性是一把雙刃劍——它允許糟糕的程式碼，使除錯和測試變得困難。
Angular、React 和 Vue框架的總結
Angular
是最成熟的框架，在貢獻者方面有很好的支援，是一個完整的包。然而，學習曲線是陡峭的，角度開發的概念可能會拖累新的開發人員。對於擁有大型團隊的公司和已經使用TypeScript的開發人員來說，Angular是一個不錯的選擇。
React
已經到了成熟的年齡，並且有來自社群的大量貢獻。它得到了廣泛的接受。React的就業市場非常好，這個框架的未來看起來很光明。
React對於那些開始使用前端JavaScript框架的人、初創公司和喜歡一些靈活性的開發人員來說是個不錯的選擇。與其他框架無縫整合的能力為那些希望程式碼具有一定靈活性的人提供了極大的優勢。
Vue
是最新的競技場，沒有大公司的支援。然而，在過去的幾年裡，它確實做得很好，成為一個強有力的角力和反應的競爭對手。在阿里巴巴和百度等許多中國巨頭選擇Vue作為主要的前端JavaScript框架的情況下，這可能起到了一定的作用。
然而，它在未來的表現還有待觀察，人們有理由對此保持謹慎。如果您喜歡簡單，但也喜歡靈活性，那麼Vue應該是您的選擇。
這些前端框架各有利弊。根據你正在進行的專案和你的個人需求，哪一個更合適。在做決定之前，做自己的研究總是很關鍵的，特別是如果你要做的是一個商業風險而不是個人專案。
有興趣的朋友可用關注我，以後會有更多前端的文章奉上，謝謝。
