Vue、React、Angular之三國殺

 北媽 前端你別鬧 2018-05-30

                                          「 懶癌引發血案 」

目前前端技術棧發生了翻天覆地的變化，上篇剛寫了只會jquery 要失業，再不學新的你就要被淘汰，雖然有點危言聳聽，不過現實情況確實是這樣。

vue、react、angular對比和選擇 這個話題我在vue1.x 時代 2016年 就想寫了，可時光如梭，懶癌侵身，一個擱淺便是這麼多天。vue都2.5了，angular 都變成了另外一種框架了，不敢想，不敢想， JavaScript 開發框架發展的是如此之快。

如果有不知道mvvm概念的同學，請先回顧我 入坑第五篇： 秒懂前端框架歷史和MVVM框架原理！

我想除了我也沒其他人可以這麼白話而又費口水的講解這個話題。

回顧了一下這篇文，我還驚訝於當時的思路是如此清晰和用心，文筆也是賊帥（佩服一年前的自己）。

---

                                                            「 我們三分天下 」

Vue、React、Angular 框架三足鼎立，三分天下，碰巧我又是半個歷史三國迷，根據我以往的幽默風格，我們怎麼把這三個玩意兒擬人化呢？

那麼我們擬人化之後，應該怎麼定位比喻他們呢？根據我自己的理解，我要這樣區分他們，你們看合不合適：

Vue.js - 三國 之 蜀國 ，代言人 - 劉備、諸葛亮

作者：尤雨溪（個人創業，草根逆襲）

特點： 小而彌堅、個人創業、快速逆襲、短平快輕量級框架、學習入門曲線平緩、草根平民擁護者衆多、發展迅速深得人心。
適合突襲騎兵方式作戰，即插即用，又適合抱團、談判、和親所有開發方式無所不能，總之就是靈活、性能又好，不受過多限制，一個諸葛亮+3個大兄弟 撐起一片vue社區，蜀國一直就是這麼個特點和 vue 很像。

React.js - 三國 之 吳國 ，代言人 - 孫權、周瑜

作者：facebook團隊（抱團創業，家底殷厚）

特點： 靈活多變、戰術完備、生態完善、生態級框架、學習入門曲線中等、平民和本地江東父老擁護者皆多、facebook體系產品擁護者多，發展迅猛，穩穩的攻城略地，厚積薄發，大一統和組件化觀念深得人心。
吳國是有體系信仰，而又喜歡力求平衡穩定的作戰方式，吳國又總是喜歡招賢納士，對於喜歡出謀劃策，貢獻社區，這種人，吳國簡直是天堂 和 react不謀而合。

Angular.Js - 三國 之 魏國 ，代言人 - 曹操

作者：google公司員工（先單獨創業，後被谷歌收編、支持者從寡到衆）

特點： 就像曹操本人，歷史評價褒貶不一，多重人格，成就非凡，勢力龐大，創業最早，一步一個腳印攻城略地，家族龐大、框架完善、組織協調性十足、是一個真正的框架，解決方案和理論支持完善，應有盡有；但過於龐大，略顯笨重和木納，規則衆多，學習曲線陡峭。
魏國是最早有國家概念和一系列體系的三國之一，所以想改變ng的結構，就像你在魏國當官，必須上級指示纔行。對於喜歡體制內混飯又想借助資源把事做好的人，魏國是天堂 。AngularJs就是魏國的體系，嚴謹、龐大。

---

形象嗎？刺激嗎？有趣嗎？用三國來比喻真是在恰當不過了，就連作者出身 和 3個框架屬性都如此契合，我他麼真是帥透了。

vue作者 尤雨溪 是 google一個部門的小員工，早起跟着曹操混，曹操的Angular 早都出來了，他嫌棄不好用，跟着他混不行，然後創業期間又去東吳抱團吳國React，共同對抗Angular。最後結合二者優缺點 創業成功開源 Vue逐步建立蜀國。

這就是3個框架之間的聯繫，和三國初創如出一轍，只不過現在開源時代，大家都免費不存在競爭和廝殺問題，只存在誰抄誰的問題（笑）。

只說框架多牛逼，不說學習成本有多高簡直就是耍流氓

我不做流氓，因爲本身就是流氓，好，下面我們在這一篇 對比一下學習曲線問題。學習曲線意味着要介紹三大框架的所有要學的體系、基礎、技術和工具，就像三個國家的政治、軍事、民生都要說一下，是個不小的工程，有不到或者錯誤之處請指出來。

重要聲明：此篇文章不貼代碼，先做簡短介紹，下篇在對比各個特點

不要被嚇到，其實沒那麼嚇人啦，但 html、css、普通js水平 你是要有的，如果你連html 還不太懂，那就去看我前幾篇最基本的入門和書籍，這個真沒法一點一點教你，就像你要開車了，駕照還得我給你考一樣的道理。

---

                                                              「 三國殺各國特點 」

首先這3個框架都是 mv** 系列，什麼是mvvm、mvc 我前一篇簡短講過了，說白了 後端、傳統桌面開發的一套思想慢慢應用於前端，這是一種進步，也是勢不可擋的趨勢，逆勢而爲就是不想加薪了。

曹操 - AngularJs

爲何先說他，因爲他是最早，最大的前端mvvm思想框架，可以說是此類框架的先驅，諷刺的是作者之前是JAVA工程師，前端框架是一個java工程師開發出來的，所以你可知道國外多少牛人了。

Angular 的學習曲線確實很陡。它有全面的文檔，但你仍然可能被嚇哭。

Angular 是一個框架而不是一個庫，因爲它提供了關於如何構建應用程序的強有力的約束，並且還提供了更多開箱即用的功能。
Angular 是一個 “完整的解決方案” - 功能齊全，你可以愉快的開始開發。你不需要研究庫，路由解決方案或類似的東西 - 你只要開始工作就好了。

但Angular 還有總是令人困惑的構建工具，樣板，檢查器（linter）等，真的是大而全，各種依賴，java大一統思想真在這個框架體現的完美。

有後端經驗的轉前端或者想了解前端的研究這個還是可以的，因爲很多名詞和java也接近，畢竟作者就是java系。目前國內拋棄ng系列的產品越來越多，因爲太龐大、死板、優點不如缺點明顯 ，而且國內ng的生態不好，文檔翻譯也很差，從而選擇兩外2個陣營Vue、React的公司和產品很多，但國外ng生態依然很好。

孫權 - React.Js

React可謂對前端組件化開發思想的推進起到了炒雞大的作用，現在組件化開發成爲了前端複雜業務產品裏的標配利器，也終於可以像php、java一樣功能塊組件化分離了，即插即用，不用就扔，管理項目耦合度、拆分業務功能邏輯也更容易，比jq時代真可謂翻天覆地，當然這也少不了es6的模塊化寫法支持的推波助瀾。

東吳強國，facebook 一直走在前端的最前列，現在很多思想和寫法基本都是facebook這幫人制定和開源出來的，Vue的組件化、狀態管理、甚至服務端渲染多少都有它的影子，甚至名字都差不多，可見此團隊技術實力和生態功力多麼深厚。

JSX 還是 HTML 

React 打破了長期以來的最佳實踐。幾十年來，開發人員試圖分離 UI 模板和內聯的 Javascript 邏輯，但是使用 JSX，這些又被混合了。這聽起來很糟糕，但是你應該聽彼得·亨特（Peter Hunt）的演講 “React：反思最佳實踐”（2013 年 10 月）。他指出，分離模板和邏輯僅僅是技術的分離，而不是關注的分離。你應該構建組件而不是模板。組件是可重用的、可組合的、可單元測試的。

JSX 是一個類似 HTML 語法的可選預處理器，並隨後在 JavaScript 中進行編譯。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因爲後者是 Javascript 的保留字。JSX 對於開發來說是一個很大的優勢，因爲代碼寫在同一個地方，可以在代碼完成和編譯時更好地檢查工作成果。當你在 JSX 中輸入錯誤時，React 將不會編譯，並打印輸出錯誤的行號。- 北媽也還是喜歡HTML、所以vue用的多些

 

React主要的學習和適應曲線就在這裏，你要先熟悉jsx語法，一套神奇的魔法語法，其他什麼redux什麼這都是標配了全家桶很容易熟悉掌握，生態完善，學習曲線中等，而且出現問題搜索引擎可以搜出來很多答案，可見在國內的普及度也很高了。

 

最主要的他有一個兄der，ReactNative 專門做混合app開發的傢伙，對他支持很友好，簡直是標配利器，所以很多公司選擇了React陣營。

諸葛亮 - Vue.Js

要說此人不是大神是沒人信的，藝術碩士畢業但寫出來最近2年最火爆的前端框架Vue，這可能就是萬中無一的天才？

我們先不討論此人如何，單單就因爲他是華人，黃皮膚就已經註定Vue在國內會大火，因爲官方漢語文檔是我迄今爲止見過寫的最有條理性和例子最直觀的文檔。甚至比本土BAT出的衆多開源寫的都好，請問你們慚愧嗎？

Vue 似乎是三個框架中最輕量的，他們喜歡簡單易用 —— 源代碼非常易讀，不需要任何文檔或外部庫。一切都非常簡單。Vue.js “對任何東西都不做大的假設”，和 Vue 相比，React 的一大缺點是由於 JSX 的限制，組件的粒度會更小，

Vue官方就在強調 入門容易並且不脫離原有的 HTML 、CSS 、JS前端開發習慣是它最大的特色，所以學習曲線很穩、也更讓純前端人員接受和上手，vue1.0更是類似jq一樣的庫，隨意搭配很多第三方插件和框架，我在vue0.x的版本就在研究了，那時候連官方的路由都不完善，所以搭配了很多第三方的解決方案，感覺很完美，比如路由用direct、ajax乾脆直接抽離jquery的 $.ajax,就渲染ui 的時候用vue語法，其實挺棒的，後來出來的vue2.x全家桶系列，也完善了許多，但相應的配置和一些名詞也複雜了很多，這也是一個趨勢，畢竟生態越來越完善、需求也會越來越多，自然框架會越來愈龐大。

 

vue 的開發者也有了穩定的團隊，不在是一個諸葛亮+3個大兄弟了，而且淘寶的weex 框架也是基於Vue專門定做，不過現在Weex還是很多坑，這個要小心。

 

                                                         體積、性能和使用量

 

任何框架都不會十全十美：Angular 框架非常臃腫。gzip 文件大小爲 143k，而 Vue 爲 23K，React 爲 43k。
 

爲了提高性能，React 和 Vue 都使用了虛擬 DOM（Virtual DOM）。如果你對此感興趣，可以閱讀虛擬 DOM 和 DOM 之間的差異以及 react.js 中虛擬 DOM 的實際優勢。至於虛擬DOM和DOM之間的聯繫和好處對比，這是另外一個話題、涉及到原理問題，我們有機會後續在討論，北媽也正在研究這個。

 

Vue 有着很好的性能和高深的內存分配技巧。如果比較快慢的話，這些框架都非常接近，而且我們完全不必糾結一般的應用層面的框架性能問題，畢竟應用面這麼廣的框架，基礎性能上都不會很low，差別不大，不用糾結。

 

最後在上一個近2年 三大框架的下載量 和使用量大數據對比，來參考下自己喜歡或者覺得加入哪個“國家”，也可以每個國家都去體驗下，但最終你還是要謀一國而生存。
 

 

此係列是我傾心原創，如果覺得不錯想轉載務必給我留言申請轉載，並標明來源。

如果你覺得好，並且這個系列幫助了你，不用說謝謝，置頂我，並每天點廣告一條龍就行了。哈哈哈，下篇後續奉上！