這篇文章主要介紹vue框架和react框架有哪些區(qū)別，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的網(wǎng)站制作、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有永修免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

區(qū)別：1、vue中的數(shù)據(jù)由data屬性在Vue對象中進行管理，react中的數(shù)據(jù)由state屬性管理；2、vue通過slot插槽進行嵌套傳遞，react通過props.children的方式將標(biāo)簽內(nèi)的部分傳遞給子組件。

一、Vue和React框架的不同點

模板和jsx、狀態(tài)管理、組件嵌套條件渲染、列表渲染、組件間的通信傳值、路由管理

1、模板和jsx

vue：Vue.js 把html，css，js組合到一起，用各自的處理方式，使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。

react：HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，簡單說這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫。

2、狀態(tài)管理

vue：數(shù)據(jù)由data屬性在Vue對象中進行管理。

react：數(shù)據(jù)由state屬性管理，但不能直接改變state的狀態(tài)，需要通過setState()去更新。

3、組件嵌套

vue：通過slot插槽進行嵌套傳遞

父組件嵌套子組件wrap

子組件wrap

渲染結(jié)果

react：通過props.children的方式將標(biāo)簽內(nèi)的部分傳遞給子組件

父組件嵌套子組件wrap

子組件wrap

4、條件渲染和列表渲染

vue條件渲染：v-if、v-show條件渲染一組數(shù)。
vue列表渲染：v-for一組數(shù)進行列表渲染。

react條件渲染：使用邏輯運算&& || 、三目運算符來創(chuàng)建表示當(dāng)前狀態(tài)的元素。
react列表渲染：通過使用{}在JSX內(nèi)構(gòu)建一個元素集合，使用map()方法循遍歷數(shù)組。

5、組件間的通信傳值

vue:
父傳子：通過父組件綁定自定義屬性（或通過v-bind綁定動態(tài)屬性），子組件使用 props 選項時顯式的聲明props，以便它可以從父組件接收到期望的數(shù)據(jù)。
子傳父：通過父組件綁定自定義事件，子組件通過this.emit('自定義事件',value)傳值。
非父子：可以使用一個空的 Vue 實例綁定在Vue實例的原型上作為一個事件總線中心(vue.prototype.eventBus = new Vue())，用emit觸發(fā)事件，on監(jiān)聽事件。

父組件one

子組件one-one

react:
父傳子：通props屬性進行傳遞。
子傳父：父組件定義事件，子組件觸發(fā)父組件中的事件時，通過實參的形式來改變父組件中的數(shù)據(jù)來通信。
非父子：嵌套不深的非父子組件可以使共同父組件，嵌套的深可以用redux共享狀態(tài)。

父組件

子組件

6、路由管理

vue-router是全局配置方式，vue-router任何路由組件都會被渲染到<router-view/>位置。

react-router是全局組件方式，react-router子組件作為children被傳入父組件。

二、Vue和React框架的相同點

組件化：React與Vue都鼓勵將你的應(yīng)用分拆成一個個功能明確的模塊，這樣的組件化使得結(jié)構(gòu)清晰且易復(fù)用。

虛擬Dom：為高效渲染頁面，減少性能的消耗，都采取了Virtual Dom。

配套框架：兩個框架都專注于UI層，其他的功能如路由、狀態(tài)管理（vuex,redux）等都交由同伴框架進行處理。

構(gòu)建工具：React可以使用Create React App (CRA)，而Vue對應(yīng)的則是vue-cli。

以上是vue框架和react框架有哪些區(qū)別的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：vue框架和react框架有哪些區(qū)別
文章鏈接：http://jinyejixie.com/article24/pgicje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、建站公司、企業(yè)建站、品牌網(wǎng)站建設(shè)

廣告

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