神似百事和可口可樂？多角度對比React和Vue的異同

React和Vue就像可口可樂和百事可樂一樣，在React中可以做的，同樣可以在Vue中做。但是這兩者之間還有一些重要的概念性差異，尤其是反映在Angular對Vue的影響。本文就和大家一起來探討一下React和Vue的異同。

React和Vue之間有多大區別?

其實說起來，React和Vue的相似之處要絕對多於差異：

• 兩者都是用於創建UI的JavaScript庫

• 兩者都快速輕便

• 都有基於組件的架構

• 都是用虛擬DOM

• 都可放入單個HTML文件中，或者成為更複雜webpack設置中的模塊

• 都有獨立但常用的路由器和狀態管理庫

但是它們之間的最大區別是Vue通常使用HTML模板文件，而React則完全是JavaScript。Vue具有可變狀態，以及自動系統用於重新渲染，被稱為「reactivity」。除此之外，React和Vue還有哪些具體的差異呢？

組件

在Vue.js中，通過API方法.component聲明組件，該方法接受id和定義對象的參數。你可能會注意到Vue組件的熟悉方面和不太熟悉的方面：

模板

你會注意到組件有一個模板屬性，它是HTML標記的字元串。該Vue庫包括一個編譯器，它將模板字元串轉換成渲染函數，這些渲染函數由虛擬DOM使用。

如果你想要定義自己的渲染功能，你可以選擇不使用模板，你甚至可以使用JSX。但切換到Vue只是為了做到這一點就像是去義大利旅遊不吃披薩。

Lifecycle Hooks

Vue中的組件與React組件有著相似的生命周期方法。例如，當組件狀態準備就緒時，所創建的hook會被觸發，但是在組件安裝在頁面之前。

一個很大的區別：沒有 shouldComponentUpdat，因為Vue的reactivity系統不需要。

重新渲染

Vue的初始化步驟之一是遍歷所有數據屬性，並將其轉換為getter和setter。在下圖中，你可以看到消息數據屬性如何添加get和set函數：

Vue添加這些getter和setter以在訪問或修改屬性時啟用依賴關係跟蹤和更改通知。

可變狀態

在Vue中，如果想要更改Vue中組件的狀態，你不需要setState方法，直接賦值改變即可：

// React

this.setState({ message: "Hello World" });

// Vue

this.message = "Hello World";

當消息值被改變時，其setter被觸發。這個set方法會設置新值，但也將執行第二個任務，通知Vue值已更改，以及依賴該頁面的任何部分可能需要重新渲染。

如果消息作為prop傳遞給任何子組件，Vue知道它們依賴於此，它們也將被自動重新渲染。這就是為什麼Vue組件不需要shouldComponentUpdate
方法的原因。

主模板

在主模板文件方面，Vue更像Angular。與React一樣，Vue需要安裝在頁面某個位置：

但與React不同，你可繼續添加到該主index.html，因為這是你根組件的模板。

在index.html中，還有一種方法可定義子組件模板，通過使用x-template或inline-template等HTML功能。不過，這不被認為是最佳做法，因為它將模板與組件定義其餘部分分開。

指令

類似Angular，Vue允許通過「指令」加強模板，這些是具有v-前綴的特殊HTML屬性，例如v-if用於條件渲染，v-bind用於綁定表達式到常規HTML屬性。

分配到指令的值是JavaScript表達式，你可以引用數據屬性，包括三元運算符等。

工作流程

Vue沒有正式的create-react-app，但有社區構建的create-vue-app。啟動項目的官方建議是vue-cli。它可從簡單項目通過HTML文件生成任何內容到完整的webpack+server-side
rendering項目：

$ vue init template-name project-name

單個HTML文件項目

Vue的創造者Evan You將其項目稱為「漸進式框架」，因為它可為複雜的應用程序進行擴展，或者為簡單應用程序進行縮小。當然，React也可做到這一點。不同的是，Vue項目通常使用較少的ES6功能，很少使用JSX，所以通常不需要添加Babel。此外，Vue庫都在一個文件中，而對應的ReactDOM沒有單獨文件。

下面是如何添加Vue到單個HTML文件項目：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

請注意：如果你不打算使用模板字元串，因此不需要模板編譯器，則會有較小的Vue省略，被稱為vue.runtime，大約為20KB。

單個文件組件

如果你樂意使用Webpack工具添加構建步驟到你的項目，可使用Vue的單文件組件(SFC)。這些文件具有.vue擴展名，並封裝組件模板、JavaScript配置和樣式在單個文件中：

這些毫無疑問是Vue最酷的功能之一，因為你通過HTML標記獲得「正確」模板，但JavaScript也需要在這裡，讓模板和邏輯之間沒有尷尬的分離。還有名為vue-loader的Webpack載入器，負責處理SFC。在構建過程中，模板轉換為渲染函數，這是瀏覽器中vue.runtime.js的完美用例。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！