react和vue的區(qū)別有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹了react和vue的區(qū)別有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的港閘網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設(shè)合作伙伴！

區(qū)別：vue是雙向綁定的，采用template；react是單向的，采用jsx。Vue的優(yōu)缺點：簡單、快速、強大、對模塊友好，但不支持IE8。React的優(yōu)缺點：速度快、跨瀏覽器兼容、模塊化；但學習曲線陡峭，需要深入的知識來構(gòu)建應用程序。

react和vue的區(qū)別

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

Vue通過 getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化。

React默認是通過比較引用的方式（diff）進行的，如果不優(yōu)化可能導致大量不必要的VDOM的重新渲染。為什么React不精確監(jiān)聽數(shù)據(jù)變化呢？這是因為Vue和React設(shè)計理念上的區(qū)別，Vue使用的是可變數(shù)據(jù)，而React更強調(diào)數(shù)據(jù)的不可變，兩者沒有好壞之分，Vue更加簡單，而React構(gòu)建大型應用的時候更加魯棒。

數(shù)據(jù)綁定

vue：

vue是雙向綁定， Vue.js 最核心的功能有兩個，一是響應式的數(shù)據(jù)綁定系統(tǒng)，二是組件系統(tǒng)。所謂雙向綁定，指的是vue實例中的data與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會相應的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實現(xiàn)的。

Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過監(jiān)聽 DOM 事件實現(xiàn)的語法糖】

vue的依賴追蹤是通過 Object.defineProperty 把data對象的屬性全部轉(zhuǎn)為 getter/setter來實現(xiàn)的；當改變數(shù)據(jù)的某個屬性值時，會觸發(fā)set函數(shù),獲取該屬性值的時候會觸發(fā)get函數(shù)，通過這個特性來實現(xiàn)改變數(shù)據(jù)時改變視圖；也就是說只有當數(shù)據(jù)改變時才會觸發(fā)視圖的改變，反過來在操作視圖時，只能通過DOM事件來改變數(shù)據(jù)，再由此來改變視圖，以此來實現(xiàn)雙向綁定

雙向綁定是在同一個組件內(nèi)，將數(shù)據(jù)和視圖綁定起來，和父子組件之間的通信并無什么關(guān)聯(lián)；

組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦，在開發(fā)中可能有多個子組件依賴于父組件的某個數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個子組件變化會引發(fā)所有依賴這個數(shù)據(jù)的子組件發(fā)生變化，所以vue不推薦子組件修改父組件的數(shù)據(jù)，直接修改props會拋出警告

思想是響應式的，也就是基于是數(shù)據(jù)可變的，通過對每一個屬性建立Watcher來監(jiān)聽， 當屬性變化的時候，響應式的更新對應的虛擬dom。

react：

react是單向數(shù)據(jù)流；react中通過將state（Model層）與View層數(shù)據(jù)進行雙向綁定達數(shù)據(jù)的實時更新變化，具體來說就是在View層直接寫JS代碼Model層中的數(shù)據(jù)拿過來渲染，一旦像表單操作、觸發(fā)事件、ajax請求等觸發(fā)數(shù)據(jù)變化，則進行雙同步。推崇結(jié)合immutable來實現(xiàn)數(shù)據(jù)不可變。 可以看看：https://www.cnblogs.com/yangyangxxb/p/10104817.html。react在setState之后會重新走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續(xù)渲染， 如果返回了false，就不會重新渲染，PureComponent就是重寫了shouldComponentUpdate， 然后在里面作了props和state的淺層對比;

【相關(guān)教程推薦：React視頻教程】

組件通信的不同

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

• 父組件通過props向子組件傳遞數(shù)據(jù)或者回調(diào)，雖然可以傳遞回調(diào)，但是我們一般只傳數(shù)據(jù)；

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

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

React中也有對應的三種方式：

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

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

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

框架本質(zhì)不同

Vue本質(zhì)是MVVM框架，由MVC發(fā)展而來；

React是前端組件化框架，由后端組件化發(fā)展而來。

Vue.js的優(yōu)缺點

優(yōu)點：

1. 簡單：官方文檔很清晰，比 Angular 簡單易學。

2. 快速：異步批處理方式更新 DOM。

3. 組合：用解耦的、可復用的組件組合你的應用程序。

4. 緊湊：~18kb min+gzip，且無依賴。

5. 強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)。

6. 對模塊友好：可以通過 NPM、Bower 或 Duo 安裝，不強迫你所有的代碼都遵循 Angular 的各種規(guī)定，使用場景更加靈活。

缺點：

1. 新生兒：Vue.js是一個新的項目，沒有angular那么成熟。

2. 影響度不是很大：google了一下，有關(guān)于Vue.js多樣性或者說豐富性少于其他一些有名的庫。

3. 不支持IE8：

React的優(yōu)缺點

優(yōu)點：

1. 速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現(xiàn)對實際DOM的局部更新。

2. 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的API，甚至在IE8中都是沒問題的。

3. 模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現(xiàn)問題是，可以方便地進行隔離。

4. 單向數(shù)據(jù)流：Flux是一個用于在JavaScript應用中創(chuàng)建單向數(shù)據(jù)層的架構(gòu)，它隨著React視圖庫的開發(fā)而被Facebook概念化。

5. 同構(gòu)、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執(zhí)行，預渲染你的應用有助于搜索引擎優(yōu)化。

6.兼容性好：比如使用RequireJS來加載和打包，而Browserify和Webpack適用于構(gòu)建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

缺點：

React本身只是一個V而已，并不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。

陡峭的學習曲線：由于復雜的設(shè)置過程，屬性，功能和結(jié)構(gòu)，它需要深入的知識來構(gòu)建應用程序。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“react和vue的區(qū)別有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

網(wǎng)站題目：react和vue的區(qū)別有哪些-創(chuàng)新互聯(lián)
當前網(wǎng)址：http://muchs.cn/article12/cspigc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、虛擬主機、ChatGPT、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(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)