細說vue react angular 區別，快速搞定技術選型！

前言

入行三年多，因爲最近開始接手angular項目，到此爲止，算是三大框架都擼了一遍了，不敢說熟練使用，可是也是有了一些使用和選型心得了，在此嘗試細說三大框架的優勢以區別，加深本身理解的同時，幫助你們快速搞定技術選型。

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

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

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

一、響應式

響應式的系統可謂至關方便，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。具體原理不在贅述，直接上圖：

二、模板語法

在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算法，到更新視圖

三、實現MVVM

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

直接上圖，view， 和model很好理解，那麼viewmodel究竟是什麼呢？他是一個抽象的東西，在vue 中viewmodel其實就是好比咱們的方法，咱們的事件，等等，都是這一層，這一層的操做，幫助改變數據，或者改變視圖，起到承上啓下的做用，也實現了，vue很是經典的數據雙向綁定

四、使用友好，上手簡單

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

五、弱化性能優化，用戶只需關注邏輯

相比與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

一、不可變值的設計思想，也是函數式編程的實踐

咱們知道，在react中性能優化的權利交給了開發者，因此，在默認狀況下當react 的父組件更新時，子組件必然更新，這樣，就須要咱們使用react 提供的一些優化手段，好比scu，好比purecomponent和memo等，來進行相關的性能優化，咱們知道 ShouldComponentUpdate(SCU)能夠用來阻斷更新的蔓延。可是React組件默認並無實現它，於是須要開發者來判斷是否須要對應用進行性能優化。在這個方法中，你能夠檢測組件的state或props是否被修改，若是沒有修改那麼將返回false，那麼這個組件和它的子組件都不會被從新渲染。問題在於這裏：若是數據是可變的，而且被直接修改了，SCU會一直返回false，這就致使組件永遠不被從新渲染，在設計之初，這個不可變值的的理念就貫穿react，甚至還爲不可變值專門耗時兩年開發了Immutable.js 這個js的庫，這也是函數式編程的理念。

二、all in js

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

三、活躍的社區，繁榮的生態

這一點是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折騰起來順手，都是技術大牛，誰不想沒事搞搞大新聞，是吧！

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

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

入上圖所示，就是react 本身的事件機制，這樣就能實現很好的跨平臺能力。

五、Fiber(時間分片)

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

如此一來，大體解決了因爲react渲染時因爲diff計算過長佔用主進程所帶來的卡頓，以及掉幀問題。

angular

因爲angular 僅上手三個月，諸多原理不甚瞭解，大體列舉一下，

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

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

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

聯繫

我在學習三大框架時，發現我學vue 是一個月，可能到了react就須要20天，在到angular 可能也就須要15天了，實際上是由於他們都有着千絲萬縷的聯繫，只要這個思想有了，那麼三大框架的學習難度是逐漸下降的，儘管行業都是angulr比react難學，react比vue難學，接下來咱們就來講說他們的聯繫

一、組件化

三大框架中，都是提倡組件化開發的框架，因此，好比當你在開發vue的項目時，具有組件化的思想，在日常開發中可以有意識的去抽離展現型組件，和容器型組件，那麼，在開發react 和angular時，你只會駕輕就熟，不會到處爲難

二、都是數據驅動視圖

三大框架，都是屬於mvvm框架，數據驅動視圖的思想始終貫穿始終，因此咱們在開發時，只須要關注數據變化便可，雖然使用方式不盡相同，react 屬於函數式，angular 和vue 屬於聲明式編程，可是，數據驅動的思想不變，好比react 使用setState賦值，而vue 和angular 使用顯式直接賦值他們最後的目的都是改值，從而觸發頁面更新

三、共同的開發套路

在三大框架中，因爲都遵循組件化思想，因此，都有着相同的開發套路，只是使用方式略有差異，好比，都有父子組件傳遞，都有數據管理框架，都有前端路由，都有插槽，只不過在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住的的，技術選型選的後期，到底仍是選設計能力。設計的好，三大框架都能勝任大型項目，主要技術選型仍是人的問題，

一、因爲vue 上手快，容易招人，因此，若是項目緊急，公司前端團隊總體技術實力薄弱，那麼vue是個很是不錯的選擇

二、若是是超大型項目，公司人手又足，技術實力強悍，學習能力強，那麼angular絕對是不二之選，就可維護來講，angualr 絕對是上上選，可是就我寫着三個多月的angualr來講，若是前端團隊總體水平良莠不齊，真的是無法維護，寫到後期你絕對會有找代碼三小時，寫代碼三分鐘的體會（別問爲何）

三、若是團隊內部，技術實力還行，可是時間有限，那麼react，和vue 那都是不錯選擇，固然更推薦react一些，由於寫的更爽，那種成就感，不言而喻！之因此不推薦angualr 就項目而言 ng 的侷限實在太大。ts ，rxjs ，裝飾器，依賴注入…… 學習成本實在過高

四、若是要考慮兼容性，那仍是什麼都別用的好，老老實實jquery吧！

以上只是建議，老是技術選型，要考慮的問題太多了，也免不了和人打交道，好比，公司的架構是個後端的，那麼他確定首推angualr，這時做爲前端組長，也只能聽命了，在好比，公司以前項目是react，那麼這時有新項目時，要不要增長團隊的成員的學習成本，也是要考慮的問題，總之，在技術選型時，不能造成鄙視鏈，有人以爲angular牛逼，看不起用react，和vue的，以爲ts ，rxjs ，裝飾器，依賴注入等這些新東西會了之後，就視別人爲菜雞，其實，這些思想並非大家設計的，並且，若是選型以後，對基層程序員要求天然也提高了一個檔次，美其名曰是能篩選更優秀的人，可是也想一想，爲啥優秀的人爲啥要在年這當個小兵。因此千萬不要人云亦云，聽別人說什麼好，那他就是好的，其實對於公司來講，合適纔是最重要的，並不必定是最好的。

最後

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