前面兩篇已經做了細緻的分析，這一篇就總結總結三大主流架構吧
1. angular
1.1. 簡介:
1.2. 優點：
1.背後靠山（google），有着穩定的維護團隊。且google的Adwords業務就使用了angular，作為一個賺錢的業務，google也會讓它的環境更穩定一些。
2、angular+typescript，google和微軟的雙劍合璧。angular全面支援
typescript文法，typescript不僅包含es6中的文法，也包括一些新的文法，
最重要的一點是它增加了類型規則，這讓代碼的可讀性和可維護性大大的提高，它也可以讓有java或.net背景的開發人員更快的掌握。
3、完整。其實相對
react和
vue來說，
更可以說是一個架構，而
本身隻能算是一個庫。
自帶了幾乎所有頁面應具有的功能，路由、表單、ajax、模版、雙向資料綁定等等。它原生的form表單子產品非常強大，除了雙向綁定的基本功能，還自帶驗證等，開發人員不需要再去為了這些功能找第三方庫，angular一個架構就包含了這些的所有，是以對于選擇困難症人群，這是一個優點。
4、每個架構都有自己的cli腳手架，可以快速搭建項目雛形。angular-cli自帶國際化。
5、它的每一個元件都是一個檔案夾，html、js、和css檔案是分開的，讓代碼更加清晰。
而且它的各類型檔案單獨存在，在開發中使用任何IDE都可以檢查代碼。可以使用自帶的格式化功能，讓開發過程中的代碼更整潔。
1.3. 缺點：
1、難調試，angular的代碼整潔、規範，很容易維護和審查，但是它的控制台報錯資訊太差了，大部分情況是無法看出問題到底在哪，這就在開發過程中給調試增加了很大的難度。而
在開發中會更加明确的讓開發人員了解到錯誤出在哪裡。
2、太重了,它自帶了很多子產品，這解決了開發人員在選擇上耗費的時間，壓縮後達到了168k，是vue50k的三倍還多，即使在4版本中，拆分了一些功能，但是它依然還是很重
3、學習成本，angular它有超多的概念，有一些單單通過文檔還很難于了解，還有不友好的api文檔。因為它的東西太多，是以api文檔内容也很多，增大了閱讀難度。這就導緻了剛接觸angular的人很難上手。也給心理上造成了很大的壓力，那文檔一看就不想看了，還有api，它是英文的。
2.React
2.1. 簡介：
react本身不能算作一個架構，因為它本身的功能有限，不過它有一個龐大的生态系統，全世界無數開發人員在為它提供開源包，
也許對于開發人員一個很難完成的問題已經有其他人員幫你完成了，隻需要引入就好了。 2.2. 優點：
1、背景（facebook）
2、輕量，體積小本來應該是算在react和vue的優點中，但是在一個大型的項目中，就比如一般的react要用的是 react+redux+react-router或許還要加上發送請求的axios，如果有一些其他的需求還要再加包，vue也同樣，vue+vuex+vue-router+vue-axios，這就導緻react和vue體積小的優點在逐漸減小。是以這一方面我們應該說react和vue的
可組裝性 是強于angular的，更加靈活，想用什麼用什麼。
3、react的單項資料流機制，這相對angular的雙向資料流來說，因為單向，是以它的各種變化都是可預計的，不像雙向資料流，一旦資料流複雜起來，大家都互相觸發變化，開發人員根本猜不出你改變一個地方會在另外什麼地方跟着變
4、react-native，一個優秀的移動端開發架構，使用react特有的jsx文法，可以讓開發人員像寫pc端頁面那樣去寫移動端，它自動适配了不同的移動端的螢幕分辨率。jsx文法是将html融入到js中。
5、state，所有的資料都儲存在state中，隻可以使用setState方法去改變。開發人員可以把所有的資料都存放在state中，讓所有元件都去這裡邊取資料，當然如果元件過多的話會讓頂級元件的state過重，這時可以将公用的放在頂級state中，各自私用的存放在自身的state中。這樣在開發和維護的過程中隻需要關注各個state就好。
2.3. 缺點：
1、react的靈活性就導緻了在選擇上要耗費成本，确定使用架構的人要去考量這個項目有哪些功能，要用到哪些包還要去看哪些包的品質要高一些，因為相同的功能也會有很多開源人員貢獻包。這些工作耗費的時間成本也是一個項目不得不考慮的問題。這一問題在vue上也同樣存在
2、react的jsx文法，它學習起來并不是很難，應該是比ts要簡單一些。但是它的寫法是把html和js結合起來，這就導緻在一些IDE上，你沒法對它格式化，如果格式化的話，它會将html像js文法那種格式排列。代碼的可讀性要差一些。而且在js中寫html時就要避免兩者出現相同的關鍵字，比如class，在jsx中就要寫成className，還要是駝峰式寫法
3、使用redux，redux在處理資料流的時候是使用saga文法，開發人員要去學習saga的寫法，然後saga的異步操作和同步操作是分開在兩個函數中寫，要在元件本身寫一次，資料流到父元件時還要再寫一遍，寫法上要更複雜，如果想簡化它，就要用一個前端應用架構-DVA，就還是通過加東西來增加開發效率。
4、virtual DOM，vue會跟蹤每一個元件的依賴關系,不需要重新渲染整個元件樹.而對于React而言,每當應用的狀态被改變時,全部元件都會重新渲染,是以react中會需要shouldComponentUpdate這個生命周期函數方法來進行控制
3.Vue
-
3.1. 簡介:
vue的一個特點是每一個.vue檔案都是一個元件，在這一個vue檔案中包括style、scripts、template三個标簽來包含css、js和html。
它是最後一個出現的架構，是以在它的實作中，它取其他兩個架構之長，去其他兩個架構之短，借鑒了許多好的設計理念，
比如angular的指令、雙向綁定，react的component思想。 3.2. 優點:
1、國産架構，是以它對國内開發者在學習它時要更友好。是以它的學習成本是三個架構中最低的。中文的api文檔，我覺得單這一點，就讓國内的開發者在學習vue時能夠節省超多的精力。
2、vuex，完成了redux的功能且在寫法上更加便捷，不再需要dva這種架構去幫他簡便寫法。
3、vue的體積是三個架構中最小的，加上它的處理機制，在非大型項目的對比中，它的性能是最高的。vue在非大型項目有了react和angular的優點，且更簡單，更易上手。
4、vue會跟蹤每一個元件的依賴關系,不需要重新渲染整個元件樹
5、vue實作了資料的雙向綁定,react資料流動是單向的
3.3. 缺點:
1、vue的響應系統無法檢測屬性的添加和删除，以及某些數組的修改，開發人員有時會忽略這一點。
2、它畢竟發展的時間沒有它們長，生态環境要更小，有時在開發中出現了問題，無法在網絡上尋求到有效的幫助。
4.綜合
4.1. 效率：
angular、react和vue都是mvvm模式，（model，view，view-model），angular的資料綁定、操作dom就是通過viewmodel完成的。react和vue的view-model的高效率通過架構自身提供的virtual dom（虛拟dom）來實作，它是一個js對象，我們資料的變化會被映射到這個虛拟dom上，然後虛拟dom再去和真實的dom通過各架構自己的算法進行對比，來修改真實dom結構，這就要比angular的viewmodel直接綁定真實dom樹的操作要更有效率一些
4.2. 背景：
angular是google更新、維護。
react由facebook更新、維護。
vue是由中國人尤雨溪和他的團隊負責。
4.3. 個人觀點：
架構或者庫始終隻是一個有助于開發的工具，無論使用哪個，都需要有紮實的js基礎，沒有哪個架構是脫離它的，我們可以不使用架構，但是不能不用js，隻要把它掌握好了，無論哪個架構都能夠更加輕松的上手
本人開發的微信小程式（已上線）、公衆号及網站二維碼：
有興趣的可以進去看看或者動動你們勤勞的雙手點個關注喲 作者在此謝謝大家了。
1、佩奇網（微信小程式）：一個技術部落格小程式，可支援領取外賣優惠券。
2、江小魚（公衆号）：一個分享程式人生或者經驗哲理的公衆号
3、網站：暫時還沒想好放什麼，不過後續想好會放上去
大家記得收藏前，先點個贊哦！好的文章值得被更多人看到。
關注江哥不迷路，帶你程式設計上高速。