vue.js和react對(duì)比哪個(gè)更好

這篇文章將為大家詳細(xì)講解有關(guān)vue.js和react對(duì)比哪個(gè)更好，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue.js和react都是javascript的庫，也就是框架，那么vue.js和react這兩個(gè)框架哪個(gè)好呢？

首先我們來簡(jiǎn)單看一下vue.js框架和react框架的概念：

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

React 是一個(gè)采用聲明式，高效而且靈活的用來構(gòu)建用戶界面的框架。

vue.js和react這兩個(gè)javascript框架的概念就是如上述所說，從概念的對(duì)比中并不能直觀的看出react好還是vue.js好,那么，下面我們就從一下幾個(gè)方面來進(jìn)行vue.js和react的對(duì)比。

首先我們來看看vue.js和react數(shù)據(jù)綁定方面的對(duì)比

1、vue的數(shù)據(jù)綁定

在Vue中，View層中與數(shù)據(jù)綁定有關(guān)的有插值表達(dá)式、指令系統(tǒng)、Class和Style、事件處理器和表單控件，ajax請(qǐng)求和計(jì)算屬性也和數(shù)據(jù)變化有關(guān)，下面我們就來分別簡(jiǎn)單看看這幾個(gè)有關(guān)數(shù)據(jù)綁定的問題。

插值表達(dá)式：在Vue中，插值表達(dá)式和指令對(duì)于數(shù)據(jù)的操作又稱為模板語法。

指令：vue中的指令很方便，指令 (Directives) 是帶有 v- 前綴的特殊屬性，Vue重的指令估計(jì)是從Angular那里學(xué)來的，有很多相似的地方，但是也不完全相同。

Class和Style：數(shù)據(jù)綁定的一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩?，我們可以用v-bind 處理它們：只需要計(jì)算出表達(dá)式最終的字符串。不過，字符串拼接麻煩又易錯(cuò)。因此，在 v-bind 用于 class 和 style 時(shí)，Vue.js 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對(duì)象或數(shù)組。

事件處理器：在Vue中我們可以通過v-on來給元素注冊(cè)事件，完成事件注冊(cè)，Vue中的事件處理和平時(shí)使用的事件處理不同之處就是，既可以綁定數(shù)據(jù)處理函數(shù)，也可以使用內(nèi)聯(lián)處理器

表單控件：你可以用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。Vue中對(duì)于表單控件提供的v-model*指令非常的使用，可以方便的返回或者設(shè)置表單控件的信息。

ajax數(shù)據(jù)請(qǐng)求：vue2.0中數(shù)據(jù)請(qǐng)求推薦使用axios

計(jì)算屬性：在Vue中引入了計(jì)算屬性來處理模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)的問題，這樣不但解決了上面的問題，而且也同時(shí)讓模板和業(yè)務(wù)邏輯更好的分離。

2、react數(shù)據(jù)綁定

React中通過將state（Model層） 與View層數(shù)據(jù)進(jìn)行雙向綁定達(dá)到數(shù)據(jù)的實(shí)時(shí)更新變化，具體來說就是在View層直接寫JS代碼將Model層中的數(shù)據(jù)拿過來渲染，一旦像表單操作、觸發(fā)事件、ajax請(qǐng)求等觸發(fā)數(shù)據(jù)變化，則進(jìn)行雙向同步，所以說React的特點(diǎn)是組件化。

接著我們來看看vue.js和react組件的對(duì)比

1、react的組件與數(shù)據(jù)流

React中實(shí)現(xiàn)組件有兩種方式，一種是createClass方法，另一種是通過ES2015的思想類繼承React.Component來實(shí)現(xiàn)。

react組件之間有兩種數(shù)據(jù)通信。第一種是父子組件之間的數(shù)據(jù)通信。第二種也就是非父子組件之間的數(shù)據(jù)通信。

父子組件之間的數(shù)據(jù)通信：

在React中，父與子之間的數(shù)據(jù)通信是通過props屬性就行傳遞的；而子與父之間的數(shù)據(jù)通信可以通過父組件定義事件，子組件觸發(fā)父組件中的事件時(shí)，通過實(shí)參的形式來改變父組件中的數(shù)據(jù)來通信。

非父子組件之間的數(shù)據(jù)通信：

嵌套不深的非父子組件可以使共同父組件，觸發(fā)事件函數(shù)傳形參的方式來實(shí)現(xiàn)；當(dāng)組件層次很深的時(shí)候，在這里，React官方給我們提供了一種上下文方式，可以讓子組件直接訪問祖先的數(shù)據(jù)或函數(shù)，無需從祖先組件一層層地傳遞數(shù)據(jù)到子組件中。

react組件的生命周期：

construtor() //創(chuàng)建組件 
componentWillMount() //組件掛載之前 
componentDidMount() // 組件掛載之后 
componentWillReceiveProps() // 父組件發(fā)生render的時(shí)候子組件調(diào)用該函數(shù) 
shouldComponentUpdate() // 組件掛載之后每次調(diào)用setState后都會(huì)調(diào)用該函數(shù)判斷是否需要重新渲染組件，默認(rèn)返回true 
componentDidUpdate() // 更新 
render() //渲染，react中的核心函數(shù) 
componentWillUnmount() //組件被卸載的時(shí)候調(diào)用，一般在componentDidMount注冊(cè)的事件需要在這里刪除

2、Vue中的組件與數(shù)據(jù)流

Vue默認(rèn)的是單向數(shù)據(jù)流，這是Vue直接提出來說明的，父組件默認(rèn)可以向子組件傳遞數(shù)據(jù)，但是子組件向父組件傳遞數(shù)據(jù)就需要額外設(shè)置了。

父子組件之間的數(shù)據(jù)通信是通過Prop和自定義事件實(shí)現(xiàn)的，而非父子組件可以使用訂閱/發(fā)布模式實(shí)現(xiàn)（類似于Angualr中的非父子指令之間的通信），再復(fù)雜一點(diǎn)也是建議使用狀態(tài)管理（vuex）。

vue組件的生命周期：

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載實(shí)例到 DOM、在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，給予用戶機(jī)會(huì)在一些特定的場(chǎng)景下添加他們自己的代碼。

比如 created 鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼，也有一些其它的鉤子，在實(shí)例生命周期的不同場(chǎng)景下調(diào)用，如 mounted、updated、destroyed。鉤子的 this 指向調(diào)用它的 Vue 實(shí)例。

在接著我們來看看vue.js和react路由的對(duì)比

1、react中的路由

React中的路由只需要安裝插件react-router即可，使用時(shí)，路由器Router就是React的一個(gè)組件。

2、vue中的路由

Vue 的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持且與核心庫同步更新的；使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

最后我們來看看vue.js和react狀態(tài)管理的對(duì)比

1、react中的狀態(tài)管理：Flux

Redux 是 React 生態(tài)環(huán)境中最流行的 Flux 實(shí)現(xiàn)。Redux 事實(shí)上無法感知視圖層，所以它能夠輕松的通過一些簡(jiǎn)單綁定和 Vue 一起使用。

2、vue中的狀態(tài)管理：vuex

vuex借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。這使得它能夠更好地和 Vue 進(jìn)行整合，同時(shí)提供簡(jiǎn)潔的 API 和改善過的開發(fā)體驗(yàn)。

每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)。

關(guān)于“vue.js和react對(duì)比哪個(gè)更好”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。