隨著web技術(shù)的不斷發(fā)展，前端架構(gòu)框架、UI框架、構(gòu)建工具、CSS預(yù)處理等層出不窮，各有千秋。太多的框架在形成初期，都曾在web領(lǐng)域掀起過一場技術(shù)浪潮，可有些卻僅僅是曇花一現(xiàn)。隨著他們用戶量的逐漸減少，社區(qū)也越來越不活躍。如： meteor、backbone、ember、knockout。
目前，最受歡迎的前端框架主要有Angular、React和Vue，個個發(fā)展勢頭良好，有種三分天下的感覺。此次選型我們主要針對這三種框架及其各自的組件庫，選出適合公司開發(fā)的一種。
在開始之前，我們應(yīng)該明確是SPA還是MPA？
1 單頁web應(yīng)用（single page web application，SPA），只有一張web頁面的應(yīng)用，是加載單個HTML頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的web應(yīng)用程序。
頁面跳轉(zhuǎn)：JS渲染
優(yōu)點：頁面切換快
缺點：首屏加載時間稍慢，SEO差
2 多頁web應(yīng)用（multi page web application，MPA），每一次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都會返回一個新的HTML文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站。
頁面跳轉(zhuǎn)：返回HTML
優(yōu)點：首屏加載時間快，SEO效果好
缺點：頁面切換慢
3 流程如下：
4 多頁和單頁應(yīng)用模式的對比
多頁應(yīng)用模式（MPA） | 單頁應(yīng)用模式（SPA） | |
應(yīng)用組成 | 由多個完整頁面構(gòu)成 | 一個外殼頁面和多個頁面片段構(gòu)成 |
跳轉(zhuǎn)方式 | 頁面之間的跳轉(zhuǎn)時從一個頁面跳轉(zhuǎn)到另一個頁面 | 頁面片段之間的跳轉(zhuǎn)是把一個頁面片段刪除或隱藏，加載另一個頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn)，并沒有離開殼頁面 |
刷新方式 | 整頁刷新 | 頁面片段局部刷新 |
跳轉(zhuǎn)后公共資源是否從新加載 | 是 | 否 |
URL模式 | http://xxx/page2.html | http://xxx/shell.html#page2 |
用戶體驗 | 頁面間切換加載慢，不流暢，用戶體驗差 | 頁面片段間的切換快，用戶體驗好 |
能否實現(xiàn)轉(zhuǎn)場動畫 | 無法實現(xiàn) | 容易實現(xiàn) |
頁面間傳遞數(shù)據(jù) | 依賴URL、cookie或者local Storage，實現(xiàn)麻煩 | 因為在一個頁面內(nèi)，頁面片段間傳遞數(shù)據(jù)很容易實現(xiàn) |
搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨方案做，比較麻煩 |
特別適用的范圍 | 需要對搜索引擎友好的網(wǎng)站 | 對體驗要求高的應(yīng)用，特別是移動應(yīng)用 |
開發(fā)難度 | 低一些，框架選擇容易 | 高一些，需要專門的框架來降低這種模式的開發(fā)難度 |
結(jié)論 | 單頁應(yīng)用模式由于由很多好處，已經(jīng)是web應(yīng)用開發(fā)的潮流，特別是移動應(yīng)用開發(fā) | |
1 Angular是基于TypeScript的JavaScript框架。由Google進(jìn)行開發(fā)和維護(hù)，它被描述為“超級厲害的JavaScript MVW框架”。Angular 1.x名為AngularJS，基于JavaScript。從Angular 2開始改名為Angular，不帶JS，基于TypeScript。最新版本已升至Angular7。Google、Vine、Wix、Udemy、weather.com、healthcare.gov和Forbes都使用Angular。
2 React被描述為“用于構(gòu)建用戶界面的JavaScript”庫。React最初于2013年3月發(fā)布，由Facebook進(jìn)行開發(fā)和維護(hù)，F(xiàn)acebook在多個頁面上使用React組件。據(jù)統(tǒng)計，React在Facebook上的使用遠(yuǎn)遠(yuǎn)多于Angular在Google上的使用。最新版本為React16。React還被Airbnb、Uber、Netflix、Twitter、Pinterest、Reddit、Udemy、Wix、PayPal、Imgur、Feedly、Stripe、Tumblr、Walmart等使用。
3 Vue是近兩年發(fā)展最為迅速的JS框架之一。Vue將自己描述為一款“用于構(gòu)建直觀，快速和組件化交互式界面的MVVM框架”。它于2014年2月首次由Google前員工尤雨溪發(fā)布。于2016年發(fā)布版本2。Vue被阿里巴巴、百度、Expedia、任天堂、GitLab等使用。
在GitHub上，截止目前，Angular有44.5K的star和822名貢獻(xiàn)者；React有120K的star和1272名貢獻(xiàn)者；Vue有126K的star和253名貢獻(xiàn)者，以下為Paul Henschel提供的 npm 趨勢。Npm趨勢顯示了npm包的下載次數(shù)。
下圖為GitHub上三者的數(shù)據(jù)對比：
Angular特性：
1 良好的應(yīng)用程序結(jié)構(gòu)
2 雙向數(shù)據(jù)綁定
3 指令
4 HTML模板
5 可嵌入、注入和測試
優(yōu)點：
1 模板功能強大豐富，自帶了極其豐富的angular指令。
2 是一個比較完善的前端框架，包含服務(wù)，模板，數(shù)據(jù)雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能。
3 自定義指令，自定義指令后可以在項目中多次使用。
4 ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復(fù)用的代碼。
5 angular由Google開發(fā)，意味著它有一個堅實的基礎(chǔ)和社區(qū)支持。
缺點：
1 angular入門很容易，但深入后概念很多，學(xué)習(xí)中較難理解。
2 文檔例子非常少，官方文檔基本只寫了API，一個例子都沒有。
3 對IE6/7兼容不是很好。
4 DI依賴注入如果代碼壓縮需要顯示聲明。
React特性：
1 聲明式設(shè)計：React采用聲明式設(shè)計，可以輕松描述應(yīng)用。
2 高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3 靈活：React可以與已知的庫或框架很好的配合。
優(yōu)點：
1 速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現(xiàn)對實際DOM的局部更新。
2 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都是沒問題的。
3 模塊化：為你程序編寫?yīng)毩⒌哪K化UI組件，這樣當(dāng)某個或某些組件出現(xiàn)問題時，可以方便地進(jìn)行隔離。
4 單向數(shù)據(jù)流：Flux是一個用于在JavaScript應(yīng)用中創(chuàng)建單向數(shù)據(jù)層的架構(gòu)，它隨著React視圖庫的開發(fā)而被Facebook概念化。
5 同構(gòu)、純粹的JavaScript：因為搜索引擎的爬蟲程序依賴的是服務(wù)端響應(yīng)而不是JavaScript的執(zhí)行，預(yù)渲染你的應(yīng)用有助于搜索引擎優(yōu)化。
6 兼容性好：比如使用requireJS來加載和打包，而Browserity和webpack適用于構(gòu)建大型應(yīng)用。
缺點：
1 React本身只是一個View，并不是一個完整的框架，如果是大型項目想要一套完整的框架的話，需要加上ReactRouter和Flux才能寫大型應(yīng)用。
Vue特性：
1 輕量級的框架
2 雙向數(shù)據(jù)綁定
3 指令
4 插件化
優(yōu)點：
1 簡單：官方文檔清晰，比Angular和React易學(xué)。
2 快速：異步批處理方式更新DOM。
3 組合：用解耦的、可復(fù)用的組件組合你的應(yīng)用程序。
4 緊湊：~18kb min+gzip，且無依賴。
5 強大：表達(dá)式&無需聲明依賴的可推導(dǎo)屬性（computed properties）。
6 對模塊友好。
缺點：
1 Vue沒有Angular那么成熟。
2 不支持IE8。
在React中使用單向數(shù)據(jù)綁定，而在Angular和Vue中使用的是雙向數(shù)據(jù)綁定。
單向數(shù)據(jù)綁定指的是我們先把模板寫好，然后把模板和數(shù)據(jù)（數(shù)據(jù)可能來自后臺）整合到一起形成HTML代碼，然后把這段HTML代碼插入到文檔流里面。
單向綁定的優(yōu)點是：相應(yīng)的可以帶來單向數(shù)據(jù)流，這樣做的好處是所有的狀態(tài)變化都可以被記錄、跟蹤，狀態(tài)變化通過手動調(diào)用通知，煙頭易追溯，沒有“暗箱操作”。同時組件數(shù)據(jù)只有唯一的入口和出口，使得程序更直觀更容易理解，有利于應(yīng)用的可維護(hù)性。
單向綁定的缺點是：HTML代碼一旦生成完以后，就沒有辦法再變了，如果有新的數(shù)據(jù)來了，就必須把之前的HTML代碼去掉，再重新把新的數(shù)據(jù)和模板一起整合后插入文檔流中。所以代碼量會相應(yīng)的上升，數(shù)據(jù)的流轉(zhuǎn)過程變長，從而出現(xiàn)很多類似的樣板代碼。同時由于對應(yīng)用狀態(tài)獨立管理的嚴(yán)格要求（單一的全局store），在處理局部狀態(tài)較多的場景時（如用戶輸入交互較多的“富表單型”應(yīng)用），會顯得啰嗦及繁瑣。
雙向數(shù)據(jù)綁定=單向數(shù)據(jù)綁定+UI事件監(jiān)聽。即數(shù)據(jù)模型（Module）和視圖（View）之間的雙向綁定。用戶在視圖上的修改會自動同步到數(shù)據(jù)模型中去，同樣的，如果數(shù)據(jù)模型中的值發(fā)生了變化，也會立刻同步到視圖中去。
雙向數(shù)據(jù)綁定的優(yōu)點：無需進(jìn)行和單項綁定的那些CRUD（Create，Retrieve，Update，Delete）操作。在表單交互較多的場景下，會簡化大量業(yè)務(wù)無關(guān)的代碼。
雙向數(shù)據(jù)綁定的缺點：由于都是“暗箱操作”，我們無法追蹤局部狀態(tài)的變化，潛在的行為太多也增加了出錯時debug的難度。
Angular的雙向綁定主要是digest循環(huán)和dirty-checking（臟數(shù)據(jù)檢查），包括watch，digest和apply。
1 Angular在瀏覽器循環(huán)監(jiān)聽事件中添加了自己的digest循環(huán)事件（核心）
瀏覽器一直在監(jiān)聽頁面上的事件，當(dāng)你點擊一個按鈕等等，操作觸發(fā)之后，回調(diào)函數(shù)就會執(zhí)行，然后你就可以做任何DOM操作，等回調(diào)+函數(shù)執(zhí)行完成，瀏覽器就會相應(yīng)更新DOM。Angular往里面加了監(jiān)聽事件。
2 watch隊列
每次你綁定一些東西到你的UI界面時，就會往watch隊列里插入一條watch。Watch:監(jiān)聽一個model，當(dāng)一個model每次改變時，都會觸發(fā)第二個函數(shù)。當(dāng)我們的模板加載完畢時，Angular解釋器會尋找每一個directive（指令），然后生成每個需要的watch。
3 digest循環(huán)
當(dāng)瀏覽器接收到可以被angular context處理的事件時，digest循環(huán)就會觸發(fā)，這個循環(huán)包括了兩個更小的循環(huán)，一個是處理evalAsync隊列，另一個是watch隊列。其實就是digest會遍歷我們的watch，然后問它有沒有屬性和值發(fā)生變化了，直到所有的watch隊列全部都檢查過，一旦有watch改變了，那就要循環(huán)重新觸發(fā)，直到所有的watch都沒有變化，這樣才能保證所有的model都已經(jīng)不會再變化了。但是如果循環(huán)超過10次的話，那么它將拋出一個異常，這是為了防止無限循環(huán)，當(dāng)digest循環(huán)結(jié)束時，DOM進(jìn)行相應(yīng)的變化，這就時dirty-checking臟數(shù)據(jù)檢查。
4 最后由apply來確定是否要進(jìn)入到angular context實踐中，調(diào)用了就進(jìn)入，不調(diào)用就不用進(jìn)入。
Vue采用數(shù)據(jù)劫持（通過Object.defineProperty劫持各個屬性）結(jié)合發(fā)布-訂閱模式來實現(xiàn)雙向綁定。
1 設(shè)置一個監(jiān)聽器，也就是Observe（發(fā)布者），用來監(jiān)聽所有的屬性。Observe就是Object.defineProperty()方法，由于屬性值一般都比較多，所以采用遞歸的方式遍歷所有的屬性值，從而達(dá)到監(jiān)聽所有屬性的功能。
2 指令解析器Compile，對頁面上的每個元素節(jié)點的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)。
3 Watcher（訂閱者）時連接Observe和compile的橋梁，它可以收到每個屬性變化的通知，也就是說Observe一旦監(jiān)聽到屬性有了變動，就需要去通知watcher，watcher收到屬性變化然后去通知compile并執(zhí)行相應(yīng)的更新函數(shù)，然后更新界面。
總結(jié)：當(dāng)數(shù)據(jù)data改變時，Angular采用的時apply調(diào)用的方法，而Vue是通過Object.defineProperty()堆屬性設(shè)置一個set函數(shù)，當(dāng)數(shù)據(jù)改變了就會觸發(fā)這個函數(shù)的方式。兩個進(jìn)行對比來說，因為angular的數(shù)據(jù)綁定是臟數(shù)據(jù)檢測，簡單的說就是檢測新值和舊值有沒有變化，這樣就要定時去檢測，而Vue只是觸發(fā)set方法，因此兩者這一塊的性能消耗上Vue要比Angular更加優(yōu)秀。
React專注于使用JavaScript ES6，Vue使用JavaScript ES5或ES6。
Angular依賴于typescript。這也引入了像裝飾器和靜態(tài)類型的概念。
由于JS沒有靜態(tài)類型檢測，有些變量類型相關(guān)的問題只能在運行階段暴漏出來，為了解決這個問題，因此有了Flow等工具庫。
Flow 是Facebook開發(fā)和發(fā)布的一個開源的靜態(tài)類型檢查庫，它允許你逐漸地向你JavaScript代碼中添加類型。可以在代碼階段就檢測出對變量地不恰當(dāng)引用。避免【undefined is not a function】之類的錯誤。而且由于類型固定了，在V8上的執(zhí)行效率會更高。
TypeScript是微軟出品的，一個會編譯為JavaScript的超集。這意味著，它用起來感覺和JavaScript很像，并不難上手。因為typescript提供了很多強類型語言的功能，所以可以使得代碼更健壯，編譯后的代碼也是針對V8等JS引擎優(yōu)化過的，所以執(zhí)行效率也不會太慢。
React使用JSX模板，JSX是一個類似HTML語法的可選預(yù)處理器，并隨后在JavaScript中進(jìn)行編譯。JSX對于開發(fā)來說是一個很大的優(yōu)勢，因為代碼寫在同一個地方，可以在代碼完成和編譯時更好地檢查工作成果。當(dāng)你在JSX中輸入錯誤時，React將不會編譯，并打印輸出錯誤地行號。而Angular2在運行時則靜默失敗。
Angular模板使用特殊的Angular語法（比如ngIf或者ngFor）來增強HTML。雖然React需要JavaScript的知識，單Angular會迫使你學(xué)習(xí)Angular特有的語法。
Vue具有“單個文件組件”。相比來說，JSX更容易調(diào)試，因為Vue不會顯示不規(guī)范HTML的語法錯誤。
關(guān)于開源框架很重要的事情是圍繞它而衍生出的工具數(shù)量。有時候，那些工具甚至比框架本身更有用。
Angular是一個框架而不是一個庫，因為它提供了關(guān)于如何構(gòu)建應(yīng)用程序的強有力的約束，并且還提供了更多開箱即用的功能。Angular是一個“完整的解決檔案”，功能齊全，我們不需要研究庫、路由解決方案或類似的東西。
1 Angular命令行工具
現(xiàn)代框架的流行趨勢時通過一個命令行工具來幫助初始化項目，而不必親自配置。Angular的工具叫Angular CLI。它允許通過一系列的命令來生成和啟動項目。所有與創(chuàng)建應(yīng)用、啟開發(fā)環(huán)境、跑測試有關(guān)的腳本都被巧妙地隱藏在一個教node_modules的文件夾中。你也能在開發(fā)期間通過它生成新的代碼，這使得創(chuàng)建新項目十分的簡單。
1 Create react app
Create-react-app 是用于快速構(gòu)建React項目的命令行工具，跟Angular CLI相似，它允許生成一個新項目，啟動開發(fā)服務(wù)和打包。它用Jest 做單元測試（一款來自Facebook的比較新的測試工具，本身有一些好的特性）。它也支持通過環(huán)境變量做靈活的應(yīng)用分析、本地環(huán)境的后端代理、Flow和其他特性。
2 Next.js
Next.js 是用于React應(yīng)用在服務(wù)端渲染的框架。它提供了一個靈活的方式在服務(wù)端全部或部分渲染應(yīng)用，返回結(jié)果給客戶端并繼續(xù)保持在瀏覽器中。他嘗試完成一項復(fù)雜的任務(wù)，盡可能簡單的創(chuàng)建一個通用應(yīng)用，所以設(shè)置也被設(shè)計的盡可能簡單。
3 Flux
Flux 是Facebook開發(fā)的用于構(gòu)建客戶端web應(yīng)用程序的應(yīng)用程序架構(gòu)。它通過利用單向數(shù)據(jù)流來補充React的可組合視圖組件。框架如下：
Actions: 驅(qū)動Dispatcher發(fā)起改變
Dispatcher: 負(fù)責(zé)分發(fā)動作（事件）
Store: 儲存數(shù)據(jù)，處理數(shù)據(jù)
View: 視圖部分
4 Redux
Redux 是JavaScript應(yīng)用程序的可預(yù)測狀態(tài)容器。是基于Flux理念的一種解決方式。
Flux的缺點為：
1 一個應(yīng)用可以擁有多個store，多個store直接可能有依賴關(guān)系（相互引用）；
2 store封裝了數(shù)據(jù)和處理數(shù)據(jù)的邏輯。
相比Flux，Redux有如下兩個特點：
1 在整個應(yīng)用只提供一個store，它是一個扁平的樹形結(jié)構(gòu)，一個節(jié)點狀態(tài)應(yīng)該只屬于一個組件。
2 不允許修改數(shù)據(jù)。即不能修改老狀態(tài)，只能返回一個新狀態(tài)。
Redux數(shù)據(jù)流如下：
1 Vue CLI
Vue CLI 是一個基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng)，提供：
通過 @vue/cli 搭建交互式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。
一個運行時依賴 (@vue/cli-service)，該依賴：
可升級；
基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；
可以通過項目內(nèi)的配置文件進(jìn)行配置；
可以通過插件進(jìn)行擴(kuò)展。
一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問題。
2 Vuex
Vuex 是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生改變。Vuex也集成到Vue的官方調(diào)試工具 devtools extension，提供了諸如零配置的time-travel調(diào)試、狀態(tài)快照導(dǎo)出等高級調(diào)試工具。
3 Vue router
Vue Router 是Vue.js官方的路由管理器。他和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為
4 Vue Resource
Vue Resource 插件提供了使用XMLHttpRequest或JSONP發(fā)出web請求和處理響應(yīng)的服務(wù)。特點如下：
1 體積小：vue-resource非常小巧，在壓縮以后只有大約12KB，服務(wù)端啟用gzip壓縮后只有4.5KB大小，這遠(yuǎn)比jQuery的體積要小得多。
2 支持主流瀏覽器：和Vue.js一樣，vue-resource除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持
3 支持Promise API和URI Templates： Promise是ES6的特性，Promise的中文含義為“先知”，Promise對象用于異步計算。 URI Templates表示URI模板，有些類似于ASP.NET MVC的路由模板
4 支持?jǐn)r截器：攔截器是全局的，攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理。 攔截器在一些場景下會非常有用，比如請求發(fā)送前在headers中設(shè)置access_token，或者在請求失敗時，提供共通的處理方式。
NGX-bootstrap 是由Valor Software的ng團(tuán)隊設(shè)計和構(gòu)建的Angular UI組件庫。支持Bootstrap3或者Bootstrap4。在GitHub上有4.5k個star以及222個貢獻(xiàn)者。需要哪個組件引入哪個組件。支持現(xiàn)代瀏覽器和IE9+。
NG-bootstrap 是由ng-bootstrap團(tuán)隊設(shè)計和構(gòu)建的Angular UI組件庫，在GitHub上有6.5k個star以及91個貢獻(xiàn)者。和NGX-bootstrap區(qū)別在于只支持Bootstrap4。只需引入ngbModule，任何組件都可以使用。支持現(xiàn)代瀏覽器和IE10+。
NG-ZORRO 是阿里設(shè)計和構(gòu)建的Angular 組件庫，繼承了Ant Design風(fēng)格，主要用來開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。在GitHub上有4.3k個star以及60個貢獻(xiàn)者。
文檔清晰，上手友好，每周都會發(fā)布一個BUG優(yōu)化的小版本，常用組件也比較多，但相比于PrimeNG少了一些。支持Angular7版本。支持現(xiàn)代瀏覽器和IE11+。
適用場景：后臺管理系統(tǒng)
Material 是由Google官方開發(fā)的一款A(yù)ngular組件庫，在GitHub上有17K個star以及338個貢獻(xiàn)者。輕量級，組件不多功能也不算特別豐富，樣式和動畫做的比較好，繼承了Google的material design。有強大的官方背景，但是因為過度追求完美反而插件的量上不去，相關(guān)資料也比較少。很多組件比較初級。支持所有主流瀏覽器的最新兩個版本（IE11+）。
適用場景：輕量級，需要快速啟動的SPA應(yīng)用。
NGX-admin 是由AKVEO設(shè)計和構(gòu)建Angular組件庫，在GitHub上有15k個star以及27個貢獻(xiàn)者。基于Angular7+,Bootstrap4。包含40+組件，60+用法示例，以及三個主題樣式模板。提供地圖和圖表組件。
PrimeNG 是由Prime設(shè)計和構(gòu)建的Angular UI組件庫。在GitHub上有4.9k個star以及234個貢獻(xiàn)者。PrimeNG是一個大而全的組件庫，提供了超過80種的組件和多種主題供開發(fā)者選擇，能夠應(yīng)付大部分的業(yè)務(wù)場景。但是靈活性比較差，在對樣式細(xì)節(jié)要求比較高的場景下，組件的樣式修改會顯得非常麻煩，并且對數(shù)據(jù)格式要求嚴(yán)格，對定制個人的組件不友好。官方對一些BUG修復(fù)的比較慢?，F(xiàn)在趨于一個比較穩(wěn)定的狀態(tài)，部分組件如table的坑比較多。
適用場景：業(yè)務(wù)需求比較明確，對樣式自定義要求不高，能在PrimeNG中找到對應(yīng)組件且直接使用就能滿足業(yè)務(wù)要求的不需要功能拓展的場景。
Material-UI 是由Google官方開發(fā)的組件庫，在GitHub上有43.8k個star以及1097個貢獻(xiàn)者。瀏覽器支持如下：
Elemental-UI 是由Thinkmill開發(fā)的UI組件庫。在GitHub上有4.2k 個star以及29個貢獻(xiàn)者。最新提交在2017年1月23日。支持現(xiàn)代瀏覽器和IE10+。
Antd 是由螞蟻金服開發(fā)的React UI組件庫，在GitHub上有41.5k個star以及719個貢獻(xiàn)者。遵循Ant設(shè)計規(guī)范，其中包含一組高質(zhì)量的組件和演示，用于構(gòu)建豐富的交互式用戶界面。使用TypeScript編寫。支持現(xiàn)代瀏覽器和IE9+。
React-bootstrap 是可重用的前端組件庫，在GitHub上有15k個star以及224個貢獻(xiàn)者。React-bootstrap的樣式組件依賴于bootstrap。目前針對于bootstrap3。支持IE9+。
Elemental 是餓了嗎前端開源維護(hù)的Vue UI 組件庫，在GitHub上有35k個star以及409個貢獻(xiàn)者。更新頻率高，組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細(xì)，例子也很豐富。支持現(xiàn)代瀏覽器和IE10+。
Ant-design-vue 是Ant Dsign的Vue實現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。在GitHub上有3.9k個star和19個貢獻(xiàn)者。包含55個組件，支持現(xiàn)代瀏覽器和IE9+。
iView 是一套基于Vue.js的開源UI組件庫，主要服務(wù)于PC界面的中后臺產(chǎn)品。在GitHub上有19.5k個star以及124個貢獻(xiàn)者。組件齊全，更新很快，文檔也很詳細(xì)，有公司團(tuán)隊維護(hù)，是比較可靠的Vue UI組件框架。目前iView已經(jīng)應(yīng)用在阿里巴巴、百度、騰訊、今日頭條、京東等大型公司的產(chǎn)品中。大多數(shù)組件和和功能支持IE9+，某些組件和功能不支持IE。
搭建大型復(fù)雜應(yīng)用：Angular（React）
開發(fā)人員少：Vue(或React)
學(xué)習(xí)路線長度：Angular>React>Vue
成熟的生態(tài)系統(tǒng)：Angular(或React)
一方面來說，TypeScript的用戶群依然不大，Angular使用TypeScript存在一定的風(fēng)險，誰也不知道TypeScript能不能一直持續(xù)發(fā)展下去。
