工作快一年多的時間，最近有空就學習了React框架，到此為止，三大框架擼了前面兩個，至於說為什麼不繼續學習Angular，那是因為在國內來說，使用Angular框架的公司真不多，並且入手成本比較高，所以說學習的意義不大。不敢說能夠熟練使用框架，但是也是有了一些使用和選型心得了，在此嘗試細說三大框架的優點以區別，加深自己理解的同時，幫助大家快速搞定技術選型。
首先來說一下三大框架的使用情況，Vue使用得最多，其次是React，Angular排在最後，讓我們看看從大佬那裡copy過來的三大框架的使用情況：
Vue：餓了麼、愛奇藝、中國平安H5、簡書、途虎養車、小紅書、樂視商城、手機搜狐、優酷、土豆、掘金、微博H5、大麥網H5、唯品會H5、小米商城H5、芒果TV移動版、嗶哩嗶哩、又拍雲、七麥數據、OneAPM、阿拉丁小程序統計、網易雲信+手機網易+網易郵箱H5登錄頁、今日頭條+西瓜視頻網頁版、貝店（APP內嵌H5）、大搜車、滴滴開源、高德開放平臺、京東拼購+領券+新人頻道H5+京東雲、瓜子二手車H5、土巴兔、分期樂、BITMAIN、小豬短租H5、IT桔子、創業邦H5、拍拍貸、極客邦科技+極客時間、開源中國、少數派、藍湖、百度指數、微信公眾平臺、大魚號（UC雲觀）、創客貼、兌吧、國美電器H5、聚美優品觸屏版、錢咖、試客小兵、賺客、雪球財經、電玩巴士、Hao123觸屏版、彈個車、攜程H5多個模塊、窮遊網、一加手機...
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...
AngularJS：百度腦圖、eolinker、海致BDP、極光、Worktile、錘子科技官網、微信網頁版、iTunes Connect、阿里雲管理後臺、鯨準對接平臺...
從上面的數據清晰可見，Vue React 旗鼓相當，但是Angular著實有點慘澹，接下來說一下三大框架的優缺點
框架之競首先我來談談個人的看法，三大框架都是好框架，每一個框架的出現都有著他的使命和應用場景，就好比後端工程師們常常探討的誰是最好的語言一樣，一句『『PHP是世上最好的語言』』,由此引發了他們的口水之戰。由於我接觸的第一個項目就是使用Vue寫的，所以也就喜歡上了Vue這個框架，覺得他的響應式寫法，組件化編程，挺方便，挺好用的，但學習了React後，發現React 更靈活的寫法，處處都能秀的最佳實踐，以及更多的選擇所帶來的新鮮感，連一個css 都能給玩出花來。至於Angualr，從官網看到發現他又大又全的能力，更好的工程化，強制性分層、依賴注入，以及ts天然的代碼檢查能力，覺得也是蠻香的，那麼究竟誰是最好的前端框架呢？
答案是沒有最好的框架，在時間、人員、經驗、維護性等等方面綜合考慮後，選定一個框架來實現項目，那麼這個框架對於這個項目來說就是最好的框架。框架只是一個工具，能夠幫助我們快速的構建代碼，但最後項目的交付還是需要我們前端工程師來實現。
三大框架特點Vue(漸進式框架)先來說說我第一個接觸的框架Vue,可能現在是前端工程師用得最多的框架了.因為他上手快、簡單易學、易招人等等,所以大多數的中小公司的項目都選擇了以Vue來開發.
用於開發用戶界面和單頁 Web 應用，Vue 是一個開源的 Model-View-View-Model (MVVM) 前端 JavaScript 庫。它被稱為漸進式框架，與其它工具一起被用於前端開發。Vue 的多用途、高性能和它在 Web 應用程式上的最佳用戶體驗成就了它的流行。
1.響應式
響應式的系統是很方便於開發者的,每個屬性的變化都可以通過Watcher來進行監聽,從而更新到虛擬DOM上.
2.模板語法
在Vue中所有的數據展示均以雙花括號的形式進行展示
Vue模板並不是html,那麼為什麼會顯示在頁面上面呢? 其實在vue 中使用的就是vue-template-compiler這個模板編譯工具， 那這個工具做了什麼呢? 就是將 Vue 2.0 模板預編譯為渲染函數（template => ast => render）
3.實現MVVM
用數據去驅動視圖,簡化繁雜的操作DOM,關注業務邏輯,節省開發時間.
ViewModel是個什麼玩意? 他是一個抽象的東西,在Vue中,ViewModel就好比是我們的方法,我們的事件,等等,在這一層,幫助我們改變了數據、視圖,是一個承上啟下的作用,這也就是Vue經典的數據雙向綁定.
4.上手簡單、只需關注業務邏輯
這是Vue最為亮眼的一點，比起React的jsx，比起Angular的rxjs，以及各種依賴注入Vue 的語法風格，和使用api相當友好.相比起React和Angular Vue在按照模板格式開發時就沒有太多限制，得益於響應式系統，也不用去做相對應的性能優化，由於Vue 內部的模板語法，能在開發環境下編譯，這樣就能在編譯的時候去做一些性能優化
React(UI庫)React 是一個開源的前端庫，主要用於開發用戶界面。React 是基於 JavaScript 的，但在大多數情況下，它與 JSX（JavaScript XML）相結合。
1.函數式編程,不可變值設計
在React中性能優化的權利交給了開發者,默認情況是當父組件更新後對應的子組件就會進行更新.這樣開發者就需要做一些優化的手段.我們知道 ShouldComponentUpdate(SCU)可以用來阻斷更新的蔓延。但是React組件默認並沒有實現它，因而需要開發者來判斷是否需要對應用進行性能優化。檢測到組件的state和props有沒有發生改變,沒發生變化的話將一直返回false.這個組件以及他所對應的子組件都不會被渲染.
2.all in js
在React中,所有的一切都是js,沒有Vue中各種模板語法的限制，編寫自由度高，他注重更更大的顆粒度拆分，推重組件化的設計思想，在react 中一切皆是組件，一個大型的項目都是有一個個組件仿佛積木一般堆積而成.
3.社區活躍度高,生態繁榮
在React社區中,你很清楚你需要做什麼,對於同一種問題,在社區中,你總能找到好幾種解決方案,比如在公共數據狀態管理就有redux，mobx，還有最近出來的concent 的也是讓人耳目一新，比如css 也是不可開交，前有sass，less，後又css in js 的style-components，總是有著新的輪子出來,所以說有選擇困難症的,在React中恐怕是不太好選擇了.
4.多端跨平臺實現
由於RN的加持，搞定react的語法之後，你甚至就可以去手擼一個app，這裡vue 是做不到的 ，也正是因為這樣，你會發現，在react 中的事件是自己寫的，而不是用的瀏覽器原生的，就是因為他需要用自己寫的這一套合成事件的機制來實現跨端事件，原理其實很簡單
5.Fiber(時間分片)
react16中新增了Fiber(時間分片)，這種渲染機制，他將Reconcilation階段的人物分成一個個執行單元，也就是所謂的fiber，然後利用requestIdleCallback這個方法去在主進程空閒的狀態下執行一個個fiber，原理如下：
.如此一來，大致解決了由於react渲染時由於diff計算過長佔用主進程所帶來的卡頓，以及掉幀問題。
Angular(成熟的前端框架)由於沒有做過Angular的項目,我只能是從別人的經驗和分享以及官網那裡搬點過來列舉了.
Angular 框架屬於 MEAN 框架，是如今創業公司最熱門的技術棧。Angular 是一個完整的基於 TypeScript 的 Web 應用開發框架，主要用於構建單頁 Web 應用（SPA）
說angular 又大又全，是因為，他不需要藉助社區的力量，僅僅靠自己就能實現一個產品從開始到上線的解決方案，比如，他提供完備的單元測試方案，這裡你在新建組件的時候都會給你一個測試的ts，在比如，他會提供開發時所需的所有服務，比如http服務，比如router服務，比如公共數據管理服務service，這些angular 全部完備，他更像是一個後端語言，嚴格的類型檢查，擁抱ts，強制性分層，以及更好的工程，面向對象編程的思想。angular很高大全同時也很複雜，angular官方庫給了你一切你想要的，使用angular技術棧，基本上你不用對組件選型浪費太多時間精力（對比react）。
三大框架的區別和聯繫聯繫1.組件化
三大框架,都是組件化的框架.當你在任意一個框架中學會了組件化的思想後,那麼你就可以用同樣的方法去學習另外兩個框架,都是相同的學習思想.
2.數據驅動視圖
三大框架都是以數據變化去改變視圖,所以說只需要關注於數據的變化即可.雖然說形式不同,但是數據驅動視圖的思想是不變的.都是通過直接或間接的賦值,從而改變視圖的變化.
3. 相同的開發思想
三大框架都遵循著組件化的思想,有著相同的開發套路,只是在使用形式上有著細微的差別,當你學會其中一種框架後,其他的兩種框架,也就迎刃而解了.
區別1.模板 vs JSX
React與Vue、Angualr最大的不同就是模板的編寫. 在Vue和Angular中,寫法接近於標準的html,而在React中,是一種獨特的JSX語法,本質上都是一個語法糖,編譯之後都是可以執行的函數.
2.虛擬DOM vs Incremental DOM
底層渲染數據方面,Vue和React都是使用的虛擬DOM 的形式,而Angular使用的是Incremental DOM.進一步了解Angular Ivy: Incremental DOM 和 Virtual DOM
3.函數式編程、聲明式編程
在react中不可變值貫穿整個框架，如果你要改變數據，那麼必須調用api去改，這就是函數式編程的思想，而在vue，和angualr中，聲明式編程的思想也深入人心，既方便有快捷。這種直接賦值的方式，和用api賦值的方式，其實，只是用法不同而已，本質還是數據驅動.
4.社區活躍度
在Vue和Angular社區中,你所想要的,都能夠找到,而在React 中更多的是需要你自己去實現,因為可以選擇的是在是太多了.
5.新手入門
Angular 工程化最好的框架，，也是由於擁抱rxjs，和ts，也是最難的框架
React 上手也也比較簡單，尤其是16引入hooks之後，號稱api終結者，但是由於社區太過活躍各種新東西層出不窮，中文文檔晦澀難懂，導致相對於vue上手也有難度
Vue由於是中國人寫的，有著完善的中文文檔，和穩定的社區，並且有著親切的模板語法，應當說是入門相對來說是最簡單的了。
最後,在國內來說,掌握Vue和React就可以了,至於說Angular,國內真的很少有公司用,一般的公司,在考慮時間,成本等等綜合因素後,選擇Vue和React居多.所以說,如果你是一個前端工程師,最先應該掌握這兩個框架,然後去找工作,可能會更得心應手.說了這麼多,但感覺總結的都是些框架的基礎和特點,沒有深入講解.也算是我用了這些框架後的一點小小的心得體會,希望能夠對剛學的你有所幫助.