vue.js和react的對比：react好還是vue.js好

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

Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

react組件的生命周期：

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

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

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

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

vue組件的生命周期：

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

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

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

1、react中的路由

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

2、vue中的路由

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

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

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

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

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

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

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

本篇文章到這里就全部結束了，關于react好還是vue.js好，如果你是初學者的話Vue簡單一點，上手也快，React和全組件化思想以及高內(nèi)聚,低耦合以及props是優(yōu)點，但是玩的不轉(zhuǎn)的話會被坑，玩得好的話項目大小沒有問題，而且也有活躍的社區(qū)，工具鏈，最佳實踐等等。當然了，最主要還是看你自己想學什么哪個適合自己。

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