Vue和React的區(qū)別有哪些

今天就跟大家聊聊有關(guān)Vue和React的區(qū)別有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站是一家專注于做網(wǎng)站、成都做網(wǎng)站與策劃設(shè)計,應(yīng)縣網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:應(yīng)縣等地區(qū)。應(yīng)縣做網(wǎng)站價格咨詢:18980820575

監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同

• Vue 通過 getter/setter 以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化，不需要特別的優(yōu)化就能達(dá)到很好的性能

• React  默認(rèn)是通過比較引用的方式進(jìn)行的，如果不優(yōu)化(PureComponent/shouldComponentUpdate)可能導(dǎo)致大量不必要的VDOM的重新渲染

為什么 React 不精確監(jiān)聽數(shù)據(jù)變化呢?這是因為 Vue 和 React 設(shè)計理念上的區(qū)別，Vue  使用的是可變數(shù)據(jù)，而React更強(qiáng)調(diào)數(shù)據(jù)的不可變。所以應(yīng)該說沒有好壞之分，Vue更加簡單，而React構(gòu)建大型應(yīng)用的時候更加魯棒。

因為一般都會用一個數(shù)據(jù)層的框架比如 Vuex 和 Redux，所以這部分不作過多解釋，在***的 vuex 和 redux的區(qū)別 中也會講到。

數(shù)據(jù)流的不同

大家都知道Vue中默認(rèn)是支持雙向綁定的。在Vue1.0中我們可以實現(xiàn)兩種雙向綁定：

• 父子組件之間，props 可以雙向綁定

• 組件與DOM之間可以通過 v-model 雙向綁定

在 Vue2.x 中去掉了***種，也就是父子組件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改)，并且 Vue2.x  已經(jīng)不鼓勵組件對自己的 props 進(jìn)行任何修改了。

所以現(xiàn)在我們只有 組件 <&ndash;> DOM 之間的雙向綁定這一種。

然而 React 從誕生之初就不支持雙向綁定，React一直提倡的是單向數(shù)據(jù)流，他稱之為 onChange/setState()模式。

不過由于我們一般都會用 Vuex 以及 Redux 等單向數(shù)據(jù)流的狀態(tài)管理框架，因此很多時候我們感受不到這一點的區(qū)別了。

HoC 和 mixins

在 Vue 中我們組合不同功能的方式是通過 mixin，而在React中我們通過 HoC  (高階組件)。

React 最早也是使用 mixins 的，不過后來他們覺得這種方式對組件侵入太強(qiáng)會導(dǎo)致很多問題，就棄用了 mixinx 轉(zhuǎn)而使用  HoC，關(guān)于mixin究竟哪里不好，可以參考React官方的這篇文章 Mixins Considered Harmful

而 Vue 一直是使用 mixin 來實現(xiàn)的。

為什么 Vue 不采用 HoC 的方式來實現(xiàn)呢?

高階組件本質(zhì)就是高階函數(shù)，React 的組件是一個純粹的函數(shù)，所以高階函數(shù)對React來說非常簡單。

但是Vue就不行了，Vue中組件是一個被包裝的函數(shù)，并不簡單的就是我們定義組件的時候傳入的對象或者函數(shù)。比如我們定義的模板怎么被編譯的?比如聲明的props怎么接收到的?這些都是vue創(chuàng)建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事，所以我們自己如果直接把組件的聲明包裝一下，返回一個高階組件，那么這個被包裝的組件就無法正常工作了。

組件通信的區(qū)別

其實這部分兩個比較相似。

在Vue 中有三種方式可以實現(xiàn)組件通信：

• 父組件通過 props 向子組件傳遞數(shù)據(jù)或者回調(diào)，雖然可以傳遞回調(diào)，但是我們一般只傳數(shù)據(jù)，而通過 事件的機(jī)制來處理子組件向父組件的通信

• 子組件通過 事件 向父組件發(fā)送消息

• 通過 V2.2.0 中新增的 provide/inject 來實現(xiàn)父組件向子組件注入數(shù)據(jù)，可以跨越多個層級。

另外有一些比如訪問 $parent/$children等比較dirty的方式這里就不講了。

在 React 中，也有對應(yīng)的三種方式：

• 父組件通過 props 可以向子組件傳遞數(shù)據(jù)或者回調(diào)

• 可以通過 context 進(jìn)行跨層級的通信，這其實和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定義事件，Vue中子組件向父組件傳遞消息有兩種方式：事件和回調(diào)函數(shù)，而且Vue更傾向于使用事件。但是在 React  中我們都是使用回調(diào)函數(shù)的，這可能是他們二者***的區(qū)別。

模板渲染方式的不同

在表層上， 模板的語法不同

• React 是通過JSX渲染模板

• 而Vue是通過一種拓展的HTML語法進(jìn)行渲染

但其實這只是表面現(xiàn)象，畢竟React并不必須依賴JSX。

在深層上，模板的原理不同，這才是他們的本質(zhì)區(qū)別：

• React是在組件JS代碼中，通過原生JS實現(xiàn)模板中的常見語法，比如插值，條件，循環(huán)等，都是通過JS語法實現(xiàn)的

• Vue是在和組件JS代碼分離的單獨的模板中，通過指令來實現(xiàn)的，比如條件語句就需要 v-if 來實現(xiàn)

對這一點，我個人比較喜歡React的做法，因為他更加純粹更加原生，而Vue的做法顯得有些獨特，會把HTML弄得很亂。舉個例子，說明React的好處：

react中render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用。但是在Vue中，由于模板中使用的數(shù)據(jù)都必須掛在  this 上進(jìn)行一次中轉(zhuǎn)，所以我們import 一個組件完了之后，還需要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的做法。

Vuex 和 Redux 的區(qū)別

從表面上來說，store 注入和使用方式有一些區(qū)別。

在 Vuex 中，$store 被直接注入到了組件實例中，因此可以比較靈活的使用：

• 使用 dispatch 和 commit 提交更新

• 通過 mapState 或者直接通過 this.$store 來讀取數(shù)據(jù)

在 Redux 中，我們每一個組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來。

另外 Vuex 更加靈活一些，組件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能進(jìn)行  dispatch，并不能直接調(diào)用 reducer 進(jìn)行修改。

從實現(xiàn)原理上來說，***的區(qū)別是兩點：

• Redux 使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的。Redux每次都是用新的state替換舊的state，而Vuex是直接修改

• Redux 在檢測數(shù)據(jù)變化的時候，是通過 diff 的方式比較差異的，而Vuex其實和Vue的原理一樣，是通過  getter/setter來比較的(如果看Vuex源碼會知道，其實他內(nèi)部直接創(chuàng)建一個Vue實例用來跟蹤數(shù)據(jù)變化)

而這兩點的區(qū)別，其實也是因為 React 和  Vue的設(shè)計理念上的區(qū)別。React更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用，非常的科班化。相比之下，Vue更偏向于簡單迅速的解決問題，更靈活，不那么嚴(yán)格遵循條條框框。因此也會給人一種大型項目用React，小型項目用  Vue 的感覺。

看完上述內(nèi)容，你們對Vue和React的區(qū)別有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁名稱：Vue和React的區(qū)別有哪些
瀏覽路徑：http://bm7419.com/article36/pcgssg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、定制網(wǎng)站、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)