當前位置:
首頁 > 知識 > 神似百事和可口可樂?多角度對比React和Vue的異同

神似百事和可口可樂?多角度對比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組件的熟悉方面和不太熟悉的方面:

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

模板

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

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

Lifecycle Hooks

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

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

重新渲染

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

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

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和Vue的異同

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

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

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

指令

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

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

分配到指令的值是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配置和樣式在單個文件中:

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

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

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

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 IT168企業級 的精彩文章:

AI風口,升級新零售玩家為何獨上AWS這艘船?
想加入王者榮耀團隊?這27大遊戲開發基礎面試題你會多少?
企業想要成功,如何打造下一代IT安全團隊?
DDoS攻擊大起底 深扒DDoS不為人知的二三事
從智慧出行看AI,為啥說騰訊雲有決勝的基因?

TAG:IT168企業級 |