目錄

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

相同點

Vue和React相同點非常多：

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

 Vue和React實現(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ù)結構，本質上是棵樹）。當每一次UI更新時，總會根據(jù)render重新生成最新的VNode，然后跟以前緩存起來老的VNode進行比對，再使用Diff算法（框架核心）去真正更新真實DOM（虛擬DOM是JS對象結構，同樣在JS引擎中，而真實DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實DOM開銷要小的多）。
Vue和React通用流程：vue template/react jsx -> render函數(shù) -> 生成VNode -> 當有變化時，新老VNode diff -> diff算法對比，并真正去更新真實DOM。
核心還是Virtual DOM，為什么Vue和React都選擇Virtual DOM（React首創(chuàng)VDOM，Vue2.0開始引入VDOM）？，個人認為主要有以下幾點：

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

不同點

1. 核心思想不同

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

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

1.1 核心思想不同導致寫法差異

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

React推崇JSX、HOC、all in js。

1.2 核心思想不同導致api差異

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

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

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

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

1.4 核心思想不同導致未來升級方向不同

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

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

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

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

3. 響應式原理不同

Vue

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

React

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

4. diff算法不同

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

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

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

5. 事件機制不同

Vue

• Vue原生事件使用標準Web事件
• Vue組件自定義事件機制，是父子組件通信基礎
• Vue合理利用了snabbdom庫的模塊插件

React

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

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