JavaScript是世界上最流行的語言之一，React和Vue是JS最流行的兩個框架。但哪一款更適合你？本文將根據每一個框架的重要優缺點，以及設計思路和看法，來對比介紹兩個框架。css
一.框架背景
React
React獲得了Facebook社區的支持，使得構建交互式UI很是容易。React本質是前端組件化框架，不是一個完整的MVC框架，能夠認爲是MVC中的V（View）。html
使用React.js的公司：Facebook，Instagram，Netflix，紐約時報，雅虎，WhatsApp，Codecademy，Dropbox，Airbnb，Asana，微軟等。前端
Vue
Vue是一個用於爲Web構建的UI的漸進式框架。它最初於2014年由前Google開發人員Evan You發佈，他使用AngularJS並決定排除Angular框架的痛點並構建輕量級的東西。Vue本質是 MVVM 框架，由 MVC 發展而來。vue
使用Vue.js的公司：Facebook，Netflix，Adobe，Grammarly，Behance，小米，阿里巴巴，Codeship，Gitlab和Laracasts等。react
二.框架簡介
React
React主張是函數式編程的理念， 實現了前端界面的高性能高效率開發，react很擅長處理組件化的頁面。React的官方網站提到了「學習一次，隨處寫做」這個關鍵功能，可使用React框架在JavaScript中構建移動應用程序。在 React 中，全部的組件的渲染功能都依靠 JSX，它是JavaScript的語法擴展，它在建立UI組件和調試時很是簡單有用。vue-router
Vue
Vue是漸進式JavaScript框架。「漸進式框架」和「自底向上增量開發的設計」是Vue開發的兩個概念。Vue能夠在任意其餘類型的項目中使用，使用成本較低，更靈活，主張較弱，在Vue的項目中也能夠輕鬆融匯其餘的技術來開發。特色：易用（使用成本低），靈活（生態系統完善，適用於任何規模的項目），高效（體積小，優化好，性能好）。vuex
三.框架共同點
a、都使用虛擬dom。vue-cli
b、都提供了響應式和組件化的視圖組件。typescript
c、都把注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。(vue-router、vuex、react-router、redux等等)編程
四.各自優點
React
靈活性和響應性：它提供最大的靈活性和響應能力。
豐富的JavaScript庫：來自世界各地的貢獻者正在努力添加更多功能。
可擴展性：因爲其靈活的結構和可擴展性，React已被證實對大型應用程序更好。
不斷髮展： React獲得了Facebook專業開發人員的支持，他們不斷尋找改進方法。
Web或移動平臺： React提供React Native平臺，可經過相同的React組件模型爲iOS和Android開發本機呈現的應用程序。
Vue
易於使用： Vue.js包含基於HTML的標準模板，能夠更輕鬆地使用和修改現有應用程序。
更順暢的集成：不管是單頁應用程序仍是複雜的Web界面，Vue.js均可以更平滑地集成更小的部件，而不會對整個系統產生任何影響。
更好的性能，更小的尺寸：它佔用更少的空間，而且每每比其餘框架提供更好的性能。
精心編寫的文檔：經過詳細的文檔提供簡單的學習曲線，無需額外的知識; HTML和JavaScript將完成工做。
適應性：總體聲音設計和架構使其成爲一種流行的JavaScript框架。它提供無障礙的遷移，簡單有效的結構和可重用的模板。
五.二者區別
1.數據是否可變
react總體是函數式的思想，在react中，是單向數據流，推崇結合immutable來實現數據不可變。react在setState以後會從新走渲染的流程，若是shouldComponentUpdate返回的是true，就繼續渲染，若是返回了false，就不會從新渲染，PureComponent就是重寫了shouldComponentUpdate，而後在裏面做了props和state的淺層對比。
而Vue的思想是響應式的，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。你能夠理解爲每個組件都已經自動得到了 shouldComponentUpdate，而且沒有上述的子樹問題限制。Vue 的這個特色使得開發者再也不須要考慮此類優化，從而可以更好地專一於應用自己。
總之，react的性能優化須要手動去作，而Vue的性能優化是自動的，可是Vue的響應式機制也有問題，就是當state特別多的時候，Watcher也會不少，會致使卡頓，因此大型應用（狀態特別多的）通常用react，更加可控。
2.HTML和JSX
react的思路是all in js，經過js來生成html，因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等。Vue是把html，css，js組合到一塊兒，用各自的處理方式，Vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理。
3.從新渲染和優化
當你比較React和Vue時，速度不能成爲決定哪一個更好的重要比較因素。在性能方面，讓咱們考慮從新渲染功能。當組件的狀態發生變化時，React的機制會觸發整個組件樹的從新呈現。您可能須要使用額外的屬性來避免沒必要要地從新渲染子組件。雖然Vue的從新渲染功能是開箱即用的，但Vue提供了優化的從新渲染，其中系統在渲染過程當中跟蹤依賴關係並相應地工做。從新渲染是Vue最顯着的特徵，也使其成爲全世界開發人員普遍接受的框架。
4.類式的組件寫法，仍是聲明式的寫法
react是類式的寫法，api不多，而Vue是聲明式的寫法，經過傳入各類options，api和參數都不少。因此react結合typescript更容易一塊兒寫，Vue稍微複雜。
5.路由和狀態管理解決方案
在像React和Vue這樣的基於組件的框架中，當您開始擴展應用程序時，須要更加關注狀態管理和數據流。這是由於有許多組件相互交互並共享數據。在這種狀況下，React提供了一種稱爲Flux / Redux架構的創新解決方案，它表明單向數據流，是著名MVC架構的替代方案。如今，若是咱們考慮Vue.js框架，就會有一個名爲Vuex的更高級架構，它集成到Vue中並提供無與倫比的體驗。
6.構建工具
React和Vue都有一個很是好的開發環境。只需不多或沒有配置，就能夠建立應用程序，可以使用最新的實踐和模板。在React中，有一個Create React App（CRA），在Vue中，它是vue-cli。這兩種引導工具都傾向於提供溫馨靈活的開發環境，並提供開始編碼的出色起點。
六.應用場景
React
a、構建一個大型應用項目
同時用Vue和React實現的簡單應用程序，可能會讓一個開發者潛意識中更加傾向於Vue。這是由於基於模板的應用程序第一眼看上去更加好理解，並且能很快跑起來。可是這些好處引入的技術債會阻礙應用擴展到更大的規模。模板容易出現很難注意到的運行時錯誤，同時也很難去測試，重構和分解。相比之下，Javascript模板能夠組織成具備很好的分解性和幹（DRY）代碼的組件，幹代碼的可重用性和可測試性更好。
React的渲染系統可配置性更強，還有諸如淺（shallow）渲染的特性，和React的測試工具結合起來使用，使代碼的可測試性和可維護性更好。 與此同時，React的immutable應用狀態可能寫起來不夠簡潔，但它在大型應用中意義非凡，由於透明度和可測試性在大型項目中變得相當重要。
b、同時適用於Web端和原生APP
React Native是一個使用Javascript構建移動端原生應用程序（iOS，Android）的庫。 它與React.js相同，只是不使用Web組件，而是使用原生組件。 若是你學過React.js，很快就能上手React Native，反之亦然。它的意義在於，開發者只須要一套知識和工具就能開發Web應用和移動端原生應用。若是你想同時作Web端開發和移動端開發，React爲再合適不過。
Vue
a、期待模板搭建應用
Vue應用的默認選項是把markup放在HTML文件中。數據綁定表達式採用的是和Angular類似的mustache語法，而指令（特殊的HTML屬性）用來向模板添加功能。
b、期待應用盡量的小和快
Vue核心開發者提供了一個benchmark測試，能夠看出Vue的渲染系統比React的更快。測試方法是10000個項目的列表渲染100次。從實用的觀點來看，這種benchmark只和邊緣狀況有關，大部分應用程序中不會常常進行這種操做，因此這不該該被視爲一個重要的比較點。可是，頁面大小是與全部項目有關的，這方面Vue再次領先，它目前的版本壓縮後只有25.6KB。
React要實現一樣的功能，你須要React DOM（37.4KB）和React with Addon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雙倍的體積並不能帶來雙倍的功能。
七.快速對比表
八.總結
咱們發現， Vue的優點包括： 模板和渲染函數的彈性選擇， 簡單的語法及項目建立， 更快的渲染速度和更小的體積；React的優點包括： 更適用於大型應用和更好的可測試性，同時適用於Web端和原生App， 更大的生態圈帶來的更多支持和工具 。
而實際上，React和Vue都是很是優秀的框架，它們之間的類似之處多過不一樣之處，而且它們大部分最棒的功能是相通的。若是想將下降學習成本或前端JavaScript框架集成到現有應用程序中，Vue是更好的選擇，若是想構建大型應用項目或者使用JavaScript構建移動應用程序，React絕對是最好的選擇。