本篇文章主要是對 React 和 Vue 進行對比，讓讀者能夠對它們有初步的了解

React 和 Vue

React 是一個聲明式的，高效的，並且靈活的用於構建用戶界面的 JavaScript 庫，可用於創建 Web 用戶交互界面。它引入了一種新的方式來處理瀏覽器 DOM。你只需要聲明地定義各個時間點的用戶界面，而不用關心在數據變化時，需要更新哪一部分 DOM。在任何時間點，React都能以最小的 DOM 修改來更新整個應用程序。

Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。

對比 React 和 Vue

相似之處:

React 與 Vue 有許多相似之處：

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

兩者之間有相似註冊，同時也有不同之處，我們無法直接指出哪一個更好，只能夠通過比較來讓使用者對它們有更多的了解，從而選擇更適合使用的那一個。

不同之處:

核心方面

React 是狀態映射到 html，以 javascript 為核心。

Vue 是先有 html 模版然後綁定到 Vue 的 javascript 對象上，是以 html為核心。

對數據的觀測上

Vue 有 watch 可以監視一個數據，同時可以用計算屬性去使其他數據隨之更新。而 React 沒有這些。

 

對狀態變化的觀測上

React 可以隨時添加 state 成員，從而靈活的切換狀態，但是只能檢測本組件的狀態變化。

Vue 在定義時就要準備頂級成員，而非頂級成員要通過 api 設置才能變成響應式的，不過 getter 和 setter 讓它能夠跟蹤任何屬性值的狀態。

在運行時的性能方面

首先，在優化方面，在 React 應用中，當某個組件的狀態發生變化時，它會以該組件為根，重新渲染整個組件子樹。

在 Vue 應用中，組件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個組件確實需要被重渲染。

HTML&CSS方面

在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理。這類方案有其優點，但也存在一些不是每個開發者都能接受的取捨。

Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴展。任何合乎規範的 HTML 都是合法的 Vue 模板，這自然也有它的優勢。

模板 vs JSX

Vue 鼓勵你去使用 HTML 模板去進行渲染，使用相似於 Angular 風格的方法去輸出動態的內容。因此，通過把原有的模板整合成新的 Vue 模板，Vue 很容易提供舊的應用的升級。這也讓新來者很容易適應它的語法。

另一方面，React 推薦你所有的模板通用 JavaScript 的語法擴展——JSX 書寫。JSX 使用 JavaScript 而不是模板來開發，賦予了開發者許多編程能力。JSX 是指 JavaScript 混合著 XML 語法，一旦你掌握了它，它使用起來會讓你感到暢快。

狀態管理 vs 對象屬性

如果你對React熟悉，你就會知道應用中的狀態是（React）關鍵的概念。也有一些配套框架被設計為管理一個大的 state 對象，如 Redux。此外，state 對象在 React 應用中是不可變的，意味著它不能被直接改變（這也許不一定正確）。在 React 中你需要使用 setState() 方法去更新狀態。

在 Vue 中，state 對象並不是必須的，數據由 data 屬性在 Vue 對象中進行管理。data 參數就是應用中數據的保存者。

對於管理大型應用中的狀態這一話題而言，Vue.js 的作者尤雨溪曾說過，（Vue 的）解決方案適用於小型應用，但對於對於大型應用而言不太適合。多數情況下，框架內置的狀態管理是不足以支撐大型應用的，Redux或 Vuex 等狀態管理方案是必須使用的。

 

React 與 Vue 之間的區別還有很多，我們不能一一列舉出來，然而，我們可以發現 Vue 的優勢在於：

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

而 React 的優勢在於：

  • 更適合大型應用和更好的可測試性
  • Web 端和移動端原生 APP 通吃
  • 更大的生態系統，更多的支持和好用的工具

React 和 Vue 都是很優秀的框架，它們之間的相似之處多過不同之處，並且大部分的優秀功能是相通的：

  • 用虛擬 DOM 實現快速渲染
  • 輕量級
  • 響應式組件
  • 服務端渲染
  • 集成路由工具，打包工具，狀態管理工具的難度低

所以，React 與 Vue 之間並不能明顯的分出高下，這取決與使用者。使用者可以根據以上的建議進行選擇，但如果你使用其中一個已經用得很好了，那麼，請不要再改變。