Vue與React兩個框架的粗略區別對比

簡單介紹

React--Facebook建立的JavaScript UI框架。它支撐着包括Instagram在內的大多數Facebook網站。React與當時流行的jQuery,Backbone.js和Angular 1等框架不一樣，它的誕生改變了JavaScript的世界。其中最大的變化是React推廣了Virtual DOM（虛擬DOM）並創造了新的語法——JSX，JSX容許開發者在JavaScript中書寫HTML（譯者注：即HTML in JavaScript）。

Vue致力解決的問題與React一致，但卻提供了另一套解決方案。Vue使用模板系統（弱化的jsx），使其對現有應用的升級更加容易。這是由於模板用的就是普通的HTML，經過Vue來整合現有的系統是比較容易的，不須要總體重構。同時Vue的學習曲線相對react來講更加容易。

類似之處

React與Vue有不少類似之處，如他們都是JavaScript的UI框架，專一於創造前端的富應用。不一樣於早期的JavaScript框架「功能齊全」，Reat與Vue只有框架的骨架，其餘的功能如路由、狀態管理等是框架分離的組件。

• 二者都是用於建立UI的JavaScript庫；
• 二者都快速輕便；
• 都有基於組件的架構；
• 都是用虛擬DOM；
• 均可放入單個HTML文件中，或者成爲更復雜webpack設置中的模塊；
• 都有獨立但經常使用的路由器和狀態管理庫；

它們之間的最大區別是Vue一般使用HTML模板文件，而React則徹底是JavaScript。Vue有雙向綁定語法糖。

不一樣點

在Vue組件中，有幾個觀念和React相差比較大，我以爲主要有如下這幾點：

• Vue組件分爲全局註冊和局部註冊，在react中都是經過import相應組件，而後模版中引用；
• props是能夠動態變化的，子組件也實時更新，在react中官方建議props要像純函數那樣，輸入輸出一致對應，並且不太建議經過props來更改視圖；
• 子組件通常要顯示地調用props選項來聲明它期待得到的數據。而在react中沒必要需，另二者都有props校驗機制；
• 每一個Vue實例都實現了事件接口，方便父子組件通訊，小型項目中不須要引入狀態管理機制，而react必需本身實現；
• 使用插槽分發內容，使得能夠混合父組件的內容與子組件本身的模板；
• 多了指令系統，讓模版能夠實現更豐富的功能，而React只能使用JSX語法；
• Vue增長的語法糖computed和watch，而在React中須要本身寫一套邏輯來實現；
• react的思路是all in js，經過js來生成html，因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等；而 vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理。
• react作的事情不多，不少都交給社區去作，vue不少東西都是內置的，寫起來確實方便一些， 好比 redux的combineReducer就對應vuex的modules， 好比reselect就對應vuex的getter和vue組件的computed， vuex的mutation是直接改變的原始數據，而redux的reducer是返回一個全新的state，因此redux結合immutable來優化性能，vue不須要。
• react是總體的思路的就是函數式，因此推崇純組件，數據不可變，單向數據流，固然須要雙向的地方也能夠作到，好比結合redux-form，組件的橫向拆分通常是經過高階組件。而vue是數據可變的，雙向綁定，聲明式的寫法，vue組件的橫向拆分不少狀況下用mixin。

社區活躍度

從二者的github表現上來看

能夠看出vue的star數量已是前端框架中最火爆的。從維護上來看，react是facebook在維護，而vue現階段雖然也有了團隊，但主要仍是尤雨溪在維護貢獻代碼，而且阿里巴巴開源的混合式框架weex也是基於vue的，因此咱們相信vue將來將會獲得更多的人和團隊維護。根據不徹底統計，包括餓了麼、簡書、高德、稀土掘金、蘇寧易購、美團、天貓、荔枝FM、房多多、Laravel、htmlBurger等國內外知名大公司都在使用vue進行新項目的開發和舊項目的前端重構工做。

使用vue的公司

根據不徹底統計，包括餓了麼、蘇寧易購、美團、天貓、Laravel、htmlBurger等國內外知名大公司都在使用vue進行新項目的開發和舊項目的前端重構工做。

使用react的公司

UI生態

react有material-design，螞蟻金服的ant-design等，vue有餓了麼出品的element以及iview等。

總結

Vue的優點包括：

• 模板和渲染函數的彈性選擇
• 簡單的語法及項目建立
• 更快的渲染速度和更小的體積

React的優點包括：

• 更適用於大型應用和更好的可測試性
• 同時適用於Web端和原生App
• 更大的生態圈帶來的更多支持和工具

而實際上，React和Vue都是很是優秀的框架，它們之間的類似之處多過不一樣之處，而且它們大部分最棒的功能是相通的：

• 利用虛擬DOM實現快速渲染
• 輕量級
• 響應式組件
• 服務器端渲染
• 易於集成路由工具，打包工具以及狀態管理工具
• 優秀的支持和社區

總結比較速覽

參考文檔

• Vue與React兩個框架的區別和優點對比http://caibaojian.com/vue-vs-react.html
• Vue.js與React的全面對比 http://www.javashuo.com/article/p-ssnhmaqd-ba.html