目錄

• 相同點(diǎn)
• 不同點(diǎn)
• 1. 核心思想不同
• 1.1 核心思想不同導(dǎo)致寫法差異
• 1.2 核心思想不同導(dǎo)致api差異
• 1.3 核心思想不同導(dǎo)致社區(qū)差異
• 1.4 核心思想不同導(dǎo)致未來升級方向不同
• 2. 組件實(shí)現(xiàn)不同
• 3. 響應(yīng)式原理不同
• 4. diff算法不同
• 5. 事件機(jī)制不同

相同點(diǎn)

Vue和React相同點(diǎn)非常多：

• 都使用Virtural DOM
• 都使用組件化思想，流程基本一致
• 都是響應(yīng)式
• 都有成熟的社區(qū)，都支持服務(wù)端渲染

 Vue和React實(shí)現(xiàn)原理和流程基本一致，都是使用Virtual DOM + Diff算法。不管是Vue的template模板 + options api寫法，還是React的Class或者Function（js 的class寫法也是function函數(shù)的一種）寫法，底層最終都是為了生成render函數(shù)，render函數(shù)執(zhí)行返回VNode（虛擬DOM的數(shù)據(jù)結(jié)構(gòu)，本質(zhì)上是棵樹）。當(dāng)每一次UI更新時(shí)，總會(huì)根據(jù)render重新生成最新的VNode，然后跟以前緩存起來老的VNode進(jìn)行比對，再使用Diff算法（框架核心）去真正更新真實(shí)DOM（虛擬DOM是JS對象結(jié)構(gòu)，同樣在JS引擎中，而真實(shí)DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實(shí)DOM開銷要小的多）。
Vue和React通用流程：vue template/react jsx -> render函數(shù) -> 生成VNode -> 當(dāng)有變化時(shí)，新老VNode diff -> diff算法對比，并真正去更新真實(shí)DOM。
核心還是Virtual DOM，為什么Vue和React都選擇Virtual DOM（React首創(chuàng)VDOM，Vue2.0開始引入VDOM）？，個(gè)人認(rèn)為主要有以下幾點(diǎn)：

• 減少直接操作DOM。框架給我們提供了屏蔽底層dom書寫的方式，減少頻繁的整更新dom，同時(shí)也使得數(shù)據(jù)驅(qū)動(dòng)視圖
• 為函數(shù)式UI編程提供可能（React核心思想）
• 可以跨平臺(tái)，渲染到DOM（web）之外的平臺(tái)。比如ReactNative，Weex

不同點(diǎn)

1. 核心思想不同

Vue早期定位是盡可能的降低前端開發(fā)的門檻（這跟Vue作者是獨(dú)立開發(fā)者也有關(guān)系）。所以Vue推崇靈活易用（漸進(jìn)式開發(fā)體驗(yàn)），數(shù)據(jù)可變，雙向數(shù)據(jù)綁定（依賴收集）。

React早期口號是Rethinking Best Practices。背靠大公司Facebook的React，從開始起就不缺關(guān)注和用戶，而且React想要做的是用更好的方式去顛覆前端開發(fā)方式（事實(shí)上跟早期jquery稱霸前端，的確是顛覆了）。所以React推崇函數(shù)式編程（純組件），數(shù)據(jù)不可變以及單向數(shù)據(jù)流。函數(shù)式編程最大的好處是其穩(wěn)定性（無副作用）和可測試性（輸入相同，輸出一定相同），所以通常大家說的React適合大型應(yīng)用，根本原因還是在于其函數(shù)式編程。
由于兩者核心思想的不同，所以導(dǎo)致Vue和React許多外在表現(xiàn)不同（從開發(fā)層面看）。

1.1 核心思想不同導(dǎo)致寫法差異

Vue推崇template（簡單易懂，從傳統(tǒng)前端轉(zhuǎn)過來易于理解）、單文件vue。而且雖然Vue2.0以后使用了Virtual DOM，使得Vue也可以使用JSX（bebel工具轉(zhuǎn)換支持），但Vue官方依然首先推薦template，這跟Vue的核心思想和定位有一定關(guān)系。

React推崇JSX、HOC、all in js。

1.2 核心思想不同導(dǎo)致api差異

Vue定位簡單易上手，基于template模板 + options API，所以不可避免的有較多的概念和api。比如template模板中需要理解slot、filter、指令等概念和api，options API中需要理解watch、computed（依賴收集）等概念和api。
React本質(zhì)上核心只有一個(gè)Virtual DOM + Diff算法，所以API非常少，知道setState就能開始開發(fā)了。

1.3 核心思想不同導(dǎo)致社區(qū)差異

由于Vue定義簡單易上手，能快速解決問題，所以很多常見的解決方案，是Vue官方主導(dǎo)開發(fā)和維護(hù)。比如狀態(tài)管理庫Vuex、路由庫Vue-Router、腳手架Vue-CLI、Vutur工具等。屬于那種大包大攬，遇到某類通用問題，只需要使用官方給出的解決方案即可。

React只關(guān)注底層，上層應(yīng)用解決方案基本不插手，連最基礎(chǔ)的狀態(tài)管理早期也只是給出flow單向數(shù)據(jù)流思想，大部分都丟給社區(qū)去解決。比如狀態(tài)管理庫方面，有redux、mobx、redux-sage、dva等一大堆（選擇困難癥犯了），所以這也造就了React社區(qū)非常繁榮。同時(shí)由于有社區(qū)做上層應(yīng)用解決方案，所以React團(tuán)隊(duì)有更多時(shí)間專注于底層升級，比如花了近2年時(shí)間把底層架構(gòu)改為Fiber架構(gòu)，以及創(chuàng)造出React Hooks來替換HOC，Suspense等。 更多框架設(shè)計(jì)思想可看 尤雨溪 - 在框架設(shè)計(jì)中尋求平衡 (opens new window)。

1.4 核心思想不同導(dǎo)致未來升級方向不同

核心思想不同，決定了Vue和React未來不管怎么升級變化，Vue和React考慮的基本盤不變。
Vue依然會(huì)定位簡單易上手（漸進(jìn)式開發(fā)），依然是考慮通過依賴收集來實(shí)現(xiàn)數(shù)據(jù)可變。這點(diǎn)從Vue3核心更新內(nèi)容可以看到：template語法基本不變、options api只增加了setup選項(xiàng)（composition api）、基于依賴收集（Proxy）的數(shù)據(jù)可變。更多Vue3具體更新內(nèi)容可看筆者總結(jié) Vue3設(shè)計(jì)思想 (opens new window)或者 尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播 (opens new window)。
React的函數(shù)式編程這個(gè)基本盤不會(huì)變。React核心思想，是把UI作為Basic Type，比如String、Array類型，然后經(jīng)過render處理，轉(zhuǎn)換為另外一個(gè)value（純函數(shù)）。從React Hooks可以看出，React團(tuán)隊(duì)致力于組件函數(shù)式編程，（純組件，無class組件），盡量減少副作用（減少this，this會(huì)引起副作用）。

2. 組件實(shí)現(xiàn)不同

Vue源碼實(shí)現(xiàn)是把options掛載到Vue核心類上，然后再new Vue({options})拿到實(shí)例（vue組件的script導(dǎo)出的是一個(gè)掛滿options的純對象而已）。所以options api中的this指向內(nèi)部Vue實(shí)例，對用戶是不透明的，所以需要文檔去說明this.s l o t 、 t h i s . slot、this.slot、this.xxx這些api。另外Vue插件都是基于Vue原型類基礎(chǔ)之上建立的，這也是Vue插件使用Vue.install的原因，因?yàn)橐_保第三方庫的Vue和當(dāng)前應(yīng)用的Vue對象是同一個(gè)。

React內(nèi)部實(shí)現(xiàn)比較簡單，直接定義render函數(shù)以生成VNode，而React內(nèi)部使用了四大組件類包裝VNode，不同類型的VNode使用相應(yīng)的組件類處理，職責(zé)劃分清晰明了（后面的Diff算法也非常清晰）。React類組件都是繼承自React.Component類，其this指向用戶自定義的類，對用戶來說是透明的。

3. 響應(yīng)式原理不同

Vue

Vue依賴收集，自動(dòng)優(yōu)化，數(shù)據(jù)可變。
Vue遞歸監(jiān)聽data的所有屬性,直接修改。
當(dāng)數(shù)據(jù)改變時(shí)，自動(dòng)找到引用組件重新渲染。

React

React基于狀態(tài)機(jī)，手動(dòng)優(yōu)化，數(shù)據(jù)不可變，需要setState驅(qū)動(dòng)新的State替換老的State。
當(dāng)數(shù)據(jù)改變時(shí)，以組件為根目錄，默認(rèn)全部重新渲染

4. diff算法不同

兩者流程思維上是類似的，都是基于兩個(gè)假設(shè)（使得算法復(fù)雜度降為O(n)）：

• 不同的組件產(chǎn)生不同的 DOM 結(jié)構(gòu)。當(dāng)type不相同時(shí)，對應(yīng)DOM操作就是直接銷毀老的DOM，創(chuàng)建新的DOM。
• 同一層次的一組子節(jié)點(diǎn)，可以通過唯一的 key 區(qū)分。

但兩者源碼實(shí)現(xiàn)上有區(qū)別：
Vue基于snabbdom庫，它有較好的速度以及模塊機(jī)制。Vue Diff使用雙向鏈表，邊對比，邊更新DOM。
React主要使用diff隊(duì)列保存需要更新哪些DOM，得到patch樹，再統(tǒng)一操作批量更新DOM。

5. 事件機(jī)制不同

Vue

• Vue原生事件使用標(biāo)準(zhǔn)Web事件
• Vue組件自定義事件機(jī)制，是父子組件通信基礎(chǔ)
• Vue合理利用了snabbdom庫的模塊插件

React

• React原生事件被包裝，所有事件都冒泡到頂層document監(jiān)聽，然后在這里合成事件下發(fā)。基于這套，可以跨端使用事件機(jī)制，而不是和Web
  DOM強(qiáng)綁定。
• React組件上無事件，父子組件通信使用props

以上就是一文總結(jié)Vue和React的異同的詳細(xì)內(nèi)容，更多關(guān)于Vue和React的異同的資料請關(guān)注其它相關(guān)文章！