前言

入行三年多，由於最近開始接手angular專案，到此為止，算是三大框架都擼了一遍了，不敢說熟練使用，但是也是有了一些使用和選型心得了，在此嘗試細說三大框架的優點以區別，加深自己理解的同時，幫助大家快速搞定技術選型。

首先交代一下三大框架使用情況，vue 使用最多，從頭貫穿到現在，其次是react，angular排在最後，僅僅三月有餘，完全是被動學習，原因很簡單，國內真的沒有人用，找到一個能有使用angular 的公司真是難上加難，先來看下大佬整理的國內的三大框架使用情況！

React：螞蟻資料視覺化、愛彼迎、飛豬、阿里大於、蝦米音樂、口碑開放平臺、貓途鷹、喜馬拉雅、鬥魚、知乎、豆瓣、美團外賣H5、房多多、石墨文件、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天氣、拼多多（APP內嵌H5）、滴滴出行、Sentry、途牛、優酷、京東服飾+生鮮+旅行+賺錢H5、瓜子金融H5、算力矩陣、鏈家H5、阿里雲管理後臺、Coding、CodePen、樹莓派、36氪、Notion、GoDaddy、站酷海洛、Plotly、麥客CRM、特贊營銷日曆、鹿班、網易雲閱讀PC端+網易雲音樂H5、獵聘網、看雲文件編輯頁、NIKE官網、丁香醫生、去哪兒H5多個模組、藝龍H5個別模組、租租車H5、汽車之家車商城、PayPal中國、Pocket、友盟、iH5...

Vue：餓了麼、愛奇藝、中國平安H5、簡書、途虎養車、小紅書、樂視商城、手機搜狐、優酷、土豆、掘金、微博H5、大麥網H5、唯品會H5、小米商城H5、芒果TV移動版、嗶哩嗶哩、又拍雲、七麥資料、OneAPM、阿拉丁小程式統計、網易雲信+手機網易+網易郵箱H5登入頁、今日頭條+西瓜視訊網頁版、貝店（APP內嵌H5）、大搜車、滴滴開源、高德開放平臺、京東拼購+領券+新人頻道H5+京東雲、瓜子二手車H5、土巴兔、分期樂、BITMAIN、小豬短租H5、IT桔子、創業邦H5、拍拍貸、極客邦科技+極客時間、開源中國、少數派、藍湖、百度指數、微信公眾平臺、大魚號（UC雲觀）、創客貼、兌吧、國美電器H5、聚美優品觸屏版、錢咖、試客小兵、賺客、雪球財經、電玩巴士、Hao123觸屏版、彈個車、攜程H5多個模組、窮遊網、一加手機...

AngularJS：百度腦圖、eolinker、海致BDP、極光、Worktile、錘子科技官網、微信網頁版、iTunes Connect、阿里雲管理後臺、鯨準對接平臺...

從上面資料來看，vue react 旗鼓相當，但是angular著實有點慘淡，接下來說一下三大框架的好壞

框架之爭

首先丟擲個人觀點，三大框架都是好框架，他們都有著完成大型專案的能力，都有著活躍的社群（但是在中國angular差點，遇見問題百度基本搜不到解決方案著實令人著急），其實，這麼久一來，框架好壞之爭一直是個前端工程師，打口水仗的必備話題，最開始我也喜歡vue，他響應式的寫法，簡潔的語法，以及不用藉助工具，單純引入cdn檔案就能開發的能力，著實令人著迷，但是後來我發現，react 更靈活的寫法，處處都能秀的最佳實踐，以及更多的選擇所帶來的新鮮感，連一個css 都能給玩出花來，在後來，接觸了angular 發現他又大又全的能力，更好的工程化，強制性分層、依賴注入，以及ts天然的程式碼檢查能力，也非常香，那麼問題來了，那個才是最好的框架呢？

答案是，沒有最好的框架，他麼都是好框架，主要看使用框架的人好不好，強不強，厲害不厲害，但是，現在大多數前端碼農依舊還在為自己的喜好而爭個勝負。框架只是接管、包裹、組織，從這個角度來說，各框架都一樣。不一樣的是正規化和程式設計模式，靈活的函式式，森嚴的面向物件方式，以及藉助各種思想工具減少我們的開發時間，優化我們的開發體驗，選框架，只不過是信仰，並沒有好壞之分，就好像你信任佛教，他信任基督教一樣。

三大框架的特點

vue

先來說vue 這個我使用最多的框架，也是github中的小星星最多的框架，一般前端老人比較喜歡使用，我還依稀的記得跟我們領導一塊吃飯的時候酒過三巡，我問領導為啥你這麼喜歡vue，領導算前端老人，屬於最早入行的一批前端，七八年工作經驗，他說，對於我們老人來說，他們是從ie6過來的，在jquery那個年代，他們對於jquery那種頻繁操作dom的繁瑣的開發方式相當痛苦，後來三大框架出來，也都用了一遍，後來發現，vue的模板語法，對於他們來說，相當親切，資料驅動檢視的理念，隱藏操作dom的繁瑣步驟，以及漸進式的整合，他接著說，年紀大了，學不動了，vue的簡單，上手快，最主要的是，好招人（這個年限了，大部分都是領導了），等優點，真的是愛不釋手。

接下來，咱來細說一下我認為的vue的優點

1、響應式

響應式的系統可謂相當方便，也就是基於是資料可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。具體原理不在贅述，直接上圖：

2、模板語法

在vue中，我們就行在寫html一樣自由暢快，這就得利於vue的模板語法

<p>{{message}}</p>
複製程式碼

為啥之前說前端老人喜歡用vue，因為他的模板語法，對於老前端來說相當的親切，因為他們都是從html過來的，那我們的模板語法到底是怎麼來的呢？

首先我們說vue的模板其實不html，那麼既然不是html他一定是被轉換成了一個js程式碼，就是所謂的模板編譯，在vue 中使用的就是vue-template-compiler這個模板編譯工具， 那這個工具做了什麼呢？其實就是將 Vue 2.0 模板預編譯為渲染函式（template => ast => render）

//模板程式碼
const compiler = require('vue-template-compiler')
const result = compiler.compile(`
  <div id="test">
    <div>
      <p>This is my vue render test</p>
    </div>
    <p>my name is {{myName}}</p>
  </div>`
)

console.log(result)
複製程式碼

{
//編譯結果
  ast: {
    type: 1,tag: 'div',attrsList: [ [Object] ],attrsMap: { id: 'test' },rawAttrsMap: {},parent: undefined,children: [ [Object],[Object],[Object] ],plain: false,attrs: [ [Object] ],static: false,staticRoot: false
  },render: `with(this){return _c('div',{attrs:{"id":"test"}},[
        _m(0),// 上述提到的靜態子樹，索引為0 <div><p>This is my vue render test</p></div>
        _v(" "),// 空白節點 </div> <p> 之間的換行內容
        _c('p',[_v("my name is "+_s(myName))])  // <p>my name is {{myName}}</p>
    ])}`,staticRenderFns: [
    `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
  ],errors: [],tips: []
}
複製程式碼

然後我們執行這個render函式，就會返回一個vnode，接下來就是我們熟悉的diff演算法，到更新檢視

3、實現MVVM

實現了MVVM我至少認為這是一個福音，用資料去驅動檢視，簡化繁瑣的操作dom，更關注與業務邏輯，這樣就能節省開發時間，和寫出易於維護的程式碼，那麼什麼叫mvvm呢？

4、使用友好，上手簡單

這是vue最為亮眼的一點，比起react的jsx，比起angular的rxjs，以及各種依賴注入，vue 的語法風格，和使用api相當友好，社群也都有都一些相對固定的方案，當然，還有一點比較幸福的是vue的效能優化做的相當到位，不用我們手動優化，不用像react那樣父元件更新render子元件也要跟新，到底還是中國人寫的，有那麼點中庸之道的意思，把簡單和選擇留給別人，複雜和無奈留給自己……

5、弱化效能優化，使用者只需關注邏輯

相比與react和angular vue在按照模板格式開發時就沒有太多限制，得益於響應式系統，也不用去做相對應的效能優化，由於vue 內部的模板語法，能在開發環境下編譯，這樣就能在編譯的時候去做一些效能優化比如，在這段vue我明確知道第二個name是變數這樣在內部就會有針對性的優化

<template>
    <ul>
        <li>0</li>
        <li>{{ name }}</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>
複製程式碼

而在react 中，由於jsx的寫法靈活，不確定性多，所以在編譯時就無法去做效能優化，而效能優化放到了我麼開發者身上

<ul>{
    data.map((name,i) => <li>{i !== 1 ? i : name}</li>)
}</ul>
複製程式碼

react

1、不可變值的設計思想，也是函數語言程式設計的實踐

我們知道，在react中效能優化的權利交給了開發者，所以，在預設情況下當react 的父元件更新時，子元件必然更新，這樣，就需要我們使用react 提供的一些優化手段，比如scu，比如purecomponent和memo等，來進行相關的效能優化，我們知道 ShouldComponentUpdate(SCU)可以用來阻斷更新的蔓延。但是React元件預設並沒有實現它，因而需要開發者來判斷是否需要對應用進行效能優化。在這個方法中，你可以檢測元件的state或props是否被修改，如果沒有修改那麼將返回false，那麼這個元件和它的子元件都不會被重新渲染。問題在於這裡：如果資料是可變的，並且被直接修改了，SCU會一直返回false，這就導致元件永遠不被重新渲染，在設計之初，這個不可變值的的理念就貫穿react，甚至還為不可變值專門耗時兩年開發了Immutable.js 這個js的庫，這也是函數語言程式設計的理念。

2、all in js

在react中一切皆js，其實所謂的jsx也只是一個語法糖，正是由於這樣的開發體驗，許多開發者會有種寫的更爽的感覺，他沒有vue中各種模板語法的限制，編寫自由度高，他注重更更大的顆粒度拆分，推重元件化的設計思想，在react 中一切皆是元件，一個大型的專案都是有一個個元件彷彿積木一般堆積而成

3、活躍的社群，繁榮的生態

這一點是react 最為驕傲的一點，他清楚自己應該做什麼，剩下都交給了社群去做，他不像vue一樣，生態社群相對穩定，基本上一套下來整個社群都認可一些相對固定的方案，而在react中可謂百花齊放，比如在公共資料狀態管理就有redux，mobx，還有最近出來的concent 的也是讓人耳目一新，比如css 也是不可開交，前有sass，less，後又css in js 的style-components，在比如，一個可以實現在redux中實現非同步的中介軟體就有redux-thunk，和redux-saga等等，更別提在react基礎上出現的dvajs，這樣一個用於代替redux的庫，以及umi的出現，目的是為了代替cra，總之有選擇困難症的同學用react可要慎重，因為，選擇真的太多了，你會無從下手。正是由於react這開放的思維方式（對應中國人的vue中庸），各種輪子層出不窮，大家搞研究的熱情不減，前端也越來越重要，工資也越來越高。我覺得好多大廠之所以選擇react正是因為react折騰起來順手，都是技術大牛，誰不想沒事搞搞大新聞，是吧！

4、多端發展跨平臺的能力

由於RN的加持，搞定react的語法之後，你甚至就可以去手擼一個app，這裡vue 是做不到的 ，也正是因為這樣，你會發現，在react 中的事件是自己寫的，而不是用的瀏覽器原生的，就是因為他需要用自己寫的這一套合成事件的機制來實現跨端事件，原理其實很簡單

5、Fiber(時間分片)

react16中新增了Fiber(時間分片)，這種渲染機制，他將Reconcilation階段的人物分成一個個執行單元，也就是所謂的fiber，然後利用requestIdleCallback這個方法去在主程序空閒的狀態下執行一個個fiber，原理如下：

angular

由於angular 僅上手三個月，諸多原理不甚瞭解，大致列舉一下，

提供了完成的端到端的解決方案

之前之所以說angular 又大又全，是因為，他不需要藉助社群的力量，僅僅靠自己就能實現一個產品從開始到上線的解決方案，比如，他提供完備的單元測試方案，這裡你在新建元件的時候都會給你一個測試的ts，在比如，他會提供開發時所需的所有服務，比如http服務，比如router服務，比如公共資料管理服務service，這些angular 全部完備，他更像是一個後端語言，嚴格的型別檢查，擁抱ts，強制性分層，以及更好的工程，面向物件程式設計的思想。angular很高大全同時也很複雜，angular官方庫給了你一切你想要的，使用angular技術棧，基本上你不用對元件選型浪費太多時間精力（對比react）。

三大框架的一些區別和聯絡

聯絡

我在學習三大框架時，發現我學vue 是一個月，可能到了react就需要20天，在到angular 可能也就需要15天了，其實是因為他們都有著千絲萬縷的聯絡，只要這個思想有了，那麼三大框架的學習難度是逐漸降低的，儘管行業都是angulr比react難學，react比vue難學，接下來我們就來說說他們的聯絡

1、元件化

三大框架中，都是提倡元件化開發的框架，所以，比如當你在開發vue的專案時，具備元件化的思想，在平常開發中能夠有意識的去抽離展示型元件，和容器型元件，那麼，在開發react 和angular時，你只會得心應手，不會處處為難

2、都是資料驅動檢視

三大框架，都是屬於mvvm框架，資料驅動檢視的思想始終貫穿始終，所以我們在開發時，只需要關注資料變化即可，雖然使用方式不盡相同，react 屬於函式式，angular 和vue 屬於宣告式程式設計，但是，資料驅動的思想不變，比如react 使用setState賦值，而vue 和angular 使用顯式直接賦值他們最後的目的都是改值，從而觸發頁面更新

3、共同的開發套路

在三大框架中，由於都遵循元件化思想，所以，都有著相同的開發套路，只是使用方式略有差別，比如，都有父子元件傳遞，都有資料管理框架，都有前端路由，都有插槽，只不過在anguar中叫做投影元件,在react 中叫組合，都能實現一些所謂的高階（hoc）函式

所以當你掌握其中一個框架以後，那麼在其他框架遇見上述類似的業務場景時，只需百度只需百度其他框架類似的用法即可，到這裡我終於明白剛入行是，領導告訴我，學程式，就是學思想。有了思想，框架之間就會沒有壁壘。

區別

我所知道的聯絡基本也就這麼多，其實這些聯絡基本能應付日常的業務開發，很多人之所以感覺學完三個框架吃力，是因為，在框架之外延伸出來的知識，是無窮無盡的，比如，你想要會用三大框架，ts ，rxjs，redux，vuex，mobx，router，node ，npm ，webpack，中介軟體等你多少都要知道一點，因為每個框架選擇擁抱的社群不一樣，那麼我們需要學習的東西他就不一樣，但是，當你給這些都瞭解完成時候，發現，其實他們的大多數的使用方式和思想也都是有相似之處，接下來說說區別

模板 vs JSX

React與Vue，angular最大的不同是模板的編寫。Vue和angulr鼓勵你去寫近似常規HTML的模板。寫起來很接近標準HTML元素，只是多了一些屬性。而react則崇尚all in js 所以獨創jsx的編寫風格，但是他們本質上都是一個語法糖，編譯之後都是一個可執行的函式，

Virtual DOM vs Incremental DOM

在底層渲染方面，vue 和react 都使用的虛擬dom，而angular 卻沒有使用，查了一下，他好像使用的是Incremental DOM，具體區別請移步 瞭解Angular Ivy: Incremental DOM 和 Virtual DOM

函數語言程式設計，宣告式程式設計

在react中不可變值貫穿整個框架，如果你要改變資料，那麼必須呼叫api去改，這就是函數語言程式設計的思想，而在vue，和angualr中，宣告式程式設計的思想也深入人心，既方便有快捷。這種直接賦值的方式，和用api賦值的方式，其實，只是用法不同而已，本質還是資料驅動

社群複雜度

在angular 和vue 中，幾乎給你想要的全部給你了，而react 追求的更多的是自力更生，所以，有選擇困難症的人才會如此的糾結。

入門難度

angular 工程化最好的框架，，也是由於擁抱rxjs，和ts（到現在ts的泛型我都搞不明白），也是最難的框架

react 上手也也比較簡單，尤其是16引入hooks之後，號稱api終結者，但是由於社群太過活躍各種新東西層出不窮，中文文件晦澀難懂，導致相對於vue上手也有難度

vue由於是中國人寫的，有著完善的中文文件，和穩定的社群，並且有著親切的模板語法，應當說是入門相對來說是最簡單的了。

三大框架應該怎麼選

對於學習

對於學習來說，我是三個框架的使用都在學習，畢竟藝多不壓身，但是還是注重react，和vue ，畢竟在國內，這兩個好了才能吃飽飯，之所以三個框架都要學習，是由於我的感受就是，體會到三個框架都有點以及缺點，由於思想都有相似之處，那麼，在之後的專案中，就能知道前輩這樣寫的好處，以及用心，比如，我在寫angular 的框架中，由於需要快取路由頁面，那麼我就會給資料存在service中，那麼在寫react時，我突然就知道了，為啥當時寫react 專案時由於用了redux，領導建議給所有資料存在redux中，在比如angular中由於ts天然的語法檢查，使用了之後直呼真香，那麼之後在使用react的時候就會引入prop-types等靜態型別檢查的工具去防止詭異的bug。所以，我建議就學習來說，有時間三大框架都學習一下。

對於個人專案

對於個人專案來說，三大框架那都是有一戰之力，如果你是接的私活，那麼一定要用自己最熟悉的框架，因為我的之前經驗是，用之前沒用過的東西，折騰起來太累了，很多坑。搞得時間長了，私活這點錢，還不如公司多加加班的加班費高，得不償失。但是如果是自己折騰的專案，那就隨便了，想用啥用啥，畢竟有的人就是覺得vue的爛七八糟的指令用起來太費勁呢

對於公司專案

對於公司的專案就要謹慎了，要考慮現有的團隊資源，專案需求以及技術上的風險，以及公司的招聘成本，其實對於三大框架來說，對於大型專案也都是能hold住的的，技術選型選的後期，到底還是選設計能力。設計的好，三大框架都能勝任大型專案，主要技術選型還是人的問題，

1、由於vue 上手快，容易招人，所以，如果專案緊急，公司前端團隊整體技術實力薄弱，那麼vue是個非常不錯的選擇

2、如果是超大型專案，公司人手又足，技術實力強悍，學習能力強，那麼angular絕對是不二之選，就可維護來說，angualr 絕對是上上選，但是就我寫著三個多月的angualr來說，如果前端團隊整體水平參差不齊，真的是沒法維護，寫到後期你絕對會有找程式碼三小時，寫程式碼三分鐘的體會（別問為什麼）

3、如果團隊內部，技術實力還行，但是時間有限，那麼react，和vue 那都是不錯選擇，當然更推薦react一些，因為寫的更爽，那種成就感，不言而喻！之所以不推薦angualr 就專案而言 ng 的侷限實在太大。ts ，rxjs ，裝飾器，依賴注入…… 學習成本實在太高

4、如果要考慮相容性，那還是什麼都別用的好，老老實實jquery吧！

以上只是建議，總是技術選型，要考慮的問題太多了，也免不了和人打交道，比如，公司的架構是個後端的，那麼他肯定首推angualr，這時作為前端組長，也只能聽命了，在比如，公司之前專案是react，那麼這時有新專案時，要不要增加團隊的成員的學習成本，也是要考慮的問題，總之，在技術選型時，不能形成鄙視鏈，有人覺得angular牛逼，看不起用react，和vue的，覺得ts ，rxjs ，裝飾器，依賴注入等這些新東西會了以後，就視別人為菜雞，其實，這些思想並不是你們設計的，而且，如果選型之後，對基層程式設計師要求自然也提升了一個檔次，美其名曰是能篩選更優秀的人，但是也想想，為啥優秀的人為啥要在年這當個小兵。所以千萬不要人云亦云，聽別人說什麼好，那他就是好的，其實對於公司來說，合適才是最重要的，並不一定是最好的。

最後

終於總結完了，其實對三個框架，也只是能用的階段，總結的比較籠統，老規矩不對之處請大佬留言指點。