vue框架和react框架有哪些區(qū)別

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

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

一、Vue和React框架的不同點(diǎn)

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

1、模板和jsx

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

react：HTML 語(yǔ)言直接寫在 JavaScript 語(yǔ)言之中，不加任何引號(hào)，簡(jiǎn)單說這就是 JSX 的語(yǔ)法，它允許 HTML 與 JavaScript 的混寫。

2、狀態(tài)管理

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

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

3、組件嵌套

vue：通過slot插槽進(jìn)行嵌套傳遞

父組件嵌套子組件wrap

子組件wrap

渲染結(jié)果

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

父組件嵌套子組件wrap

子組件wrap

4、條件渲染和列表渲染

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

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

5、組件間的通信傳值

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

父組件one

子組件one-one

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

父組件

子組件

6、路由管理

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

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

二、Vue和React框架的相同點(diǎn)

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

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

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

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

以上是vue框架和react框架有哪些區(qū)別的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！