Vue與React比較

以前用到了Vue進行開發，後來用了React，而後老是被問到爲何用React？老是說得有點模棱兩可,下面總結了一下，但願獲得補充與指正

相同點

React 和 Vue 有許多類似之處，它們都有：

• 使用 Virtual DOM，有本身的diff渲染算法
• 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
• 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。

1. 運行時性能比較

React 和 Vue 都是很是快的，因此速度並非在它們之中作選擇的決定性因素。對於具體的數據表現，

能夠看看第三方 benchmark，它專一於渲染/更新很是簡單的組件樹的真實性能。

1.1 生命週期

Vue的生命週期

React的生命週期

在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。

如要避免沒必要要的子組件的重渲染，你須要在全部可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會須要使用不可變的數據結構來使得你的組件更容易被優化。

然而，使用 PureComponent 和 shouldComponentUpdate 時，須要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。若是不符合這個狀況，那麼此類優化就會致使難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着至關的心智負擔。

在 Vue 應用中，組件的依賴是在渲染過程當中自動追蹤的，因此係統能精確知曉哪一個組件確實須要被重渲染。你能夠理解爲每個組件都已經自動得到了 shouldComponentUpdate，而且沒有上述的子樹問題限制。

Vue 的這個特色使得開發者再也不須要考慮此類優化，從而可以更好地專一於應用自己。固然，對於大型應用來講，基於這一點，仍是推薦使用React，畢竟能夠本身決定哪些props或者state變化才進行reRender
複製代碼

1.2 狀態管理 vs 對象屬性

React在state狀態管理存儲數據的，不能修改數據，修改數據在Setstate中 setState是異步的，若是須要立刻利用結果，須要在setState傳入回調，具體能夠看看 React中setState幾個現象---先知道再理解

在Vue中，state對象並非必須的，數據由data屬性在Vue對象中進行管理

2. HTML & CSS

在 React 中，一切都是 JavaScript。不只僅是 HTML 能夠用 JSX 來表達，如今的潮流也愈來愈多地將 CSS 也歸入到 JavaScript 中來處理。這類方案有其優勢，但也存在一些不是每一個開發者都能接受的取捨。Vue 的總體思想是擁抱經典的 Web 技術，並在其上進行擴展。

2.1 JSX vs Templates

在 React 中，全部的組件的渲染功能都依靠 JSX。 使用 JSX 的渲染函數有下面這些優點：

• 你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。好比你可使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 做用域中的值等等。

• 開發工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的 (好比，linting、類型檢查、編輯器的自動完成)。

雖然Vue也可使用JSX，但基本都使用模版語法，這也帶來了一些特有的優點：

• 對於不少習慣了 HTML 的開發者來講，模板比起 JSX 讀寫起來更天然。這裏固然有主觀偏好的成分，但若是這種區別會致使開發效率的提高，那麼它就有客觀的價值存在。

• 基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易。

我的以爲，使用Vue的模版語法開發起來更加便捷快速。能夠把組件區分爲兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。咱們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不一樣有所變化，但總體來講咱們發現表現類的組件遠遠多於邏輯類組件。
複製代碼

2.2 組件做用域內的 CSS

對於Vue 來講,

設置樣式的默認方法是單文件組件裏相似 style 的標籤。 單文件組件讓你能夠在同一個文件裏徹底控制 CSS，將其做爲組件代碼的一部分。

<style scoped>
  .container{
      display:flex;
  }
</style>
複製代碼

這個可選 scoped 屬性會自動添加一個惟一的屬性 (好比 data-v-8123) 爲組件內 CSS 指定做用域。

對於React來講,

語法不太同樣，React設置class是用className字段，而設置css是使用對象的形式，固然，通常仍是引入外部的css(通過編譯的sass或者less文件)比較合適。

規模

Vue 和 React 都提供了強大的路由來應對大型應用。React 社區在狀態管理方面很是有創新精神 (好比 Flux、Redux)，而這些狀態管理模式甚至 Redux 自己也能夠很是容易的集成在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式 (Vuex)，更加深刻集成 Vue 的狀態管理解決方案 Vuex 相信能爲你帶來更好的開發體驗。

二者另外一個重要差別是，Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。

我的觀點

1. React對比Vue來講，Vue的學習成本更低，更容易入手，模版語法開發起來我的以爲會比React的Jsx更快。

2. 因爲React是須要setState更新狀態以及利用shouldComponentUpdate來控制是否reRender，當應用比較龐大的時候，這一點的優化比較重要。推薦大應用使用React。