標籤：

Vue比React有什麼優點嗎？

02-10

黑React沒事，

黑Vue丟工作。

開個玩笑，兩框架我都用，不存在Vue能怎樣React不能，也不存在React能Vue不能。

如果在使用中，出現了上述的結論，那就是使用者水平太低。

運行時性能

React 和 Vue 都是非常快的，所以速度並不是在它們之中做選擇的決定性因素。對於具體的數據表現，可以移步這個第三方 benchmark，它專註於渲染/更新非常簡單的組件樹的真實性能。

優化

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

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

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

在 Vue 應用中，組件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個組件確實需要被重渲染。你可以理解為每一個組件都已經自動獲得了 shouldComponentUpdate，並且沒有上述的子樹問題限制。

Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專註於應用本身。

HTML CSS

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

Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴展。我們下面會詳細分析一下。

JSX vs Templates

在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。

JSX 說是手寫的渲染函數有下面這些優勢：

  • 你可以使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。比如你可以使用臨時變數、JS 自帶的流程式控制制、以及直接引用當前 JS 作用域中的值等等。
  • 開發工具對 JSX 的支持相比於現有可用的其他 Vue 模板還是比較先進的 (比如，linting、類型檢查、編輯器的自動完成)。

事實上 Vue 也提供了渲染函數，甚至支持 JSX。然而，我們默認推薦的還是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優勢：

  • 對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裡當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麼它就有客觀的價值存在。
  • 基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更為容易。
  • 這也使得設計師和新人開發者更容易理解和參與到項目中。
  • 你甚至可以使用其他模板預處理器，比如 Pug 來書寫 Vue 的模板。

有些開發者認為模板意味著需要學習額外的 DSL (Domain-Specific Language 領域特定語言) 才能進行開發——我們認為這種區別是比較膚淺的。首先，JSX 並不是免費的——它是基於 JS 之上的一套額外語法，因此也有它自己的學習成本。同時，正如同熟悉 JS 的人學習 JSX 會很容易一樣，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的。最後，DSL 的存在使得我們可以讓開發者用更少的代碼做更多的事，比如 v-on 的各種修飾符，在 JSX 中實現對應的功能會需要多得多的代碼。

更抽象一點來看，我們可以把組件區分為兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不同有所變化，但整體來說我們發現表現類的組件遠遠多於邏輯類組件。

組件作用域內的 CSS

除非你把組件分布在多個文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通過 CSS-in-JS 的方案實現的 (比如 styled-components、glamorous 和 emotion)。這引入了一個新的面向組件的樣式範例，它和普通的 CSS 撰寫過程是有區別的。另外，雖然在構建時將 CSS 提取到一個單獨的樣式表是支持的，但 bundle 里通常還是需要一個運行時程序來讓這些樣式生效。當你能夠利用 JavaScript 靈活處理樣式的同時，也需要權衡 bundle 的尺寸和運行時的開銷。

如果你是一個 CSS-in-JS 的愛好者，許多主流的 CSS-in-JS 庫也都支持 Vue (比如 styled-components-vue 和 vue-emotion)。這裡 React 和 Vue 主要的區別是，Vue 設置樣式的默認方法是單文件組件里類似 style 的標籤。

單文件組件讓你可以在同一個文件里完全控制 CSS，將其作為組件代碼的一部分。

&