vue框架和react框架的區別是什么

一、Vue和React框架的不同點

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

1、模板和jsx

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

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

2、狀態管理

vue：數據由data屬性在Vue對象中進行管理。

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

3、組件嵌套

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

父組件嵌套子組件wrap

子組件wrap

渲染結果

react：通過props.children的方式將標簽內的部分傳遞給子組件

父組件嵌套子組件wrap

子組件wrap

4、條件渲染和列表渲染

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

react條件渲染：使用邏輯運算&& || 、三目運算符來創建表示當前狀態的元素。
react列表渲染：通過使用{}在JSX內構建一個元素集合，使用map()方法循遍歷數組。

5、組件間的通信傳值

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

父組件one

子組件one-one

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

父組件

子組件

6、路由管理

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

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

二、Vue和React框架的相同點

組件化：React與Vue都鼓勵將你的應用分拆成一個個功能明確的模塊，這樣的組件化使得結構清晰且易復用。

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

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com