作為前端最常用的兩大框架，他們有相似之處也有各自不同的優(yōu)缺點芯侥，正確的理解這些內(nèi)容能使我們在面對項目技術(shù)棧的選擇中起到巨大的幫助作用缠犀。
首先需要明確的一點焰轻，不管是React還是Vue都不是MVVM框架臭觉，只是借鑒了MVVM的思路開發(fā)的框架。
其次兩大框架沒有必要強調(diào)哪個更好的問題，只是各自有所側(cè)重蝠筑，遇到問題選擇更適合自己和項目的才是關(guān)鍵狞膘。
兩者的異同
相似之處
- 都將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫
- 都有自己的構(gòu)建工具什乙，能讓你得到一個根據(jù)最佳實踐設(shè)置的項目模板挽封。
- 都使用了'Virtual DOM'（虛擬DOM）提高重繪性能
- 都有’props’的概念，允許組件間的數(shù)據(jù)傳遞
- 都鼓勵組件化應(yīng)用臣镣，將應(yīng)用分拆成一個個功能明確的模塊辅愿，提高復(fù)用性
雖然上面幾點提到了兩者的相似之處，但是由于設(shè)計思路的不同忆某，讓兩者在具體的實現(xiàn)和應(yīng)用中存在很多差異
區(qū)別之處
數(shù)據(jù)流
Vue默認(rèn)支持?jǐn)?shù)據(jù)雙向綁定点待，而React一直提倡單向數(shù)據(jù)流
虛擬DOM
Vue2.x 開始引入“Virtual DOM”，消除了和React在這方面的差異褒繁，但是在具體的細(xì)節(jié)還是有各自的特點
- Vue宣稱可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中馍忽，會跟蹤每一個組件的依賴關(guān)系棒坏，不需要重新渲染整個組件樹。
- 對于React而言遭笋，每當(dāng)應(yīng)用的狀態(tài)被改變時坝冕，全部子組件都會重新渲染。當(dāng)然瓦呼，這可以通過PureComponent/shouldComponentUpdate這個生命周期方法來進行控制喂窟，但Vue將此視為默認(rèn)的優(yōu)化。
組件化
React與Vue最大的不同是模板的編寫央串。
Vue鼓勵你去寫近似常規(guī)HTML的模板磨澡。寫起來很接近標(biāo)準(zhǔn)HTML元素，只是多了一些屬性质和。
React推薦你所有的模板通用JavaScript的語法擴展——JSX書寫稳摄。
具體來講：
React中render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用饲宿。但是在Vue中厦酬，由于模板中使用的數(shù)據(jù)都必須掛在 this 上進行一次中轉(zhuǎn)，所以我們import 一個組件完了之后瘫想，還需要在 components 中再聲明下仗阅，這樣顯然是很奇怪但又不得不這樣的做法。
監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同
Vue 通過 getter/setter 以及一些函數(shù)的劫持国夜，能精確知道數(shù)據(jù)變化减噪，不需要特別的優(yōu)化就能達到很好的性能
React 默認(rèn)是通過比較引用的方式進行的，如果不優(yōu)化（PureComponent/shouldComponentUpdate）可能導(dǎo)致大量不必要的VDOM的重新渲染
這是因為Vue 使用的是可變數(shù)據(jù)，而React更強調(diào)數(shù)據(jù)的不可變旋廷。
高階組件
react可以通過高階組件（Higher Order Components--HOC）來擴展鸠按，而vue需要通過mixins來擴展
原因高階組件就是高階函數(shù)，而React的組件本身就是純粹的函數(shù)饶碘，所以高階函數(shù)對React來說易如反掌目尖。相反Vue.js使用HTML模板創(chuàng)建視圖組件，這時模板無法有效的編譯扎运，因此Vue不采用HoC來實現(xiàn)瑟曲。
并不是說Vue無法創(chuàng)建高階組件乙埃，而是相對React來說方法更加繁瑣
狀態(tài)管理和對象屬性
關(guān)于Redux和Vuex的差別壁畸，如果展開來講又是一個相對較大的內(nèi)容忧额，有時間會開新的文檔進行總結(jié)帝牡，這里主要關(guān)注的還是React和Vue框架滋捶。
構(gòu)建工具
兩者都有自己的構(gòu)建工具
React ==> Create React APP
Vue ==> vue-cli
跨平臺開發(fā)
React ==> React Native
Vue ==> Weex
對比和選擇
React優(yōu)點
- 靈活性和響應(yīng)性：它提供最大的靈活性和響應(yīng)能力抓歼。
- 虛擬DOM：由于它基于文檔對象模型嚷闭，因此它允許瀏覽器友好地以HTML勤众，XHTML或XML格式排列文檔掩浙。
- 豐富的JavaScript庫：來自世界各地的貢獻者正在努力添加更多功能花吟。
- 可擴展性：由于其靈活的結(jié)構(gòu)和可擴展性，React已被證明對大型應(yīng)用程序更好厨姚。
- 不斷發(fā)展： React得到了Facebook專業(yè)開發(fā)人員的支持衅澈，他們不斷尋找改進方法。
- Web或移動平臺： React提供React Native平臺谬墙，可通過相同的React組件模型為iOS和Android開發(fā)本機呈現(xiàn)的應(yīng)用程序今布。
無論是Web還是本機移動開發(fā)，React都是大多數(shù)用戶界面設(shè)計平臺的理想選擇拭抬。
React缺點
陡峭的學(xué)習(xí)曲線：由于復(fù)雜的設(shè)置過程部默，屬性，功能和結(jié)構(gòu)造虎，它需要深入的知識來構(gòu)建應(yīng)用程序甩牺。
Vue優(yōu)點
- 易于使用： Vue.js包含基于HTML的標(biāo)準(zhǔn)模板，可以更輕松地使用和修改現(xiàn)有應(yīng)用程序累奈。
- 更順暢的集成：無論是單頁應(yīng)用程序還是復(fù)雜的Web界面贬派，Vue.js都可以更平滑地集成更小的部件，而不會對整個系統(tǒng)產(chǎn)生任何影響澎媒。
- 更好的性能搞乏，更小的尺寸：它占用更少的空間，并且往往比其他框架提供更好的性能戒努。
- 精心編寫的文檔：通過詳細(xì)的文檔提供簡單的學(xué)習(xí)曲線请敦，無需額外的知識; HTML和JavaScript將完成工作镐躲。
- 適應(yīng)性：整體聲音設(shè)計和架構(gòu)使其成為一種流行的JavaScript框架。它提供無障礙的遷移侍筛，簡單有效的結(jié)構(gòu)和可重用的模板
Vue缺點
在使用Vue.js時萤皂，當(dāng)state特別多的時候，Watcher也會很多匣椰，會導(dǎo)致卡頓裆熙。
選擇
Vue
最新文檔和更簡單的語法。
更小禽笑，更快入录，更靈活。
豐富的HTML模板佳镜，易于開發(fā)僚稿。
React
專業(yè)和出色的社區(qū)支持，以解決任何問題蟀伸。
需要構(gòu)建大型應(yīng)用程序蚀同。
輕量級，易于版本遷移啊掏。
在生態(tài)上來說蠢络，兩者其實沒多大的差距，當(dāng)然 React 的用戶是遠(yuǎn)遠(yuǎn)高于 Vue 的脖律。
在上手成本上來說谢肾，Vue 一開始的定位就是盡可能的降低前端開發(fā)的門檻腕侄，然而 React 更多的是去改變用戶去接受它的概念和思想小泉，相較于 Vue 來說上手成本略高。
