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

vue.js和react都是javascript的函式庫，也就是框架，那麼vue.js和react這兩個框架哪個好呢？本篇文章就來透過比較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資料綁定方面的對比

1、vue的資料綁定

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

插值表達式：在Vue中，插值表達式和指令對於資料的運算又稱為模板語法。

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

Class和Style：資料綁定的一個常見需求是操作元素的 class 清單和它的內聯樣式。因為它們都是屬性 ，我們可以用v-bind 處理它們：只需要計算表達式最終的字串。不過，字串拼接麻煩又易錯。因此，當 v-bind 用於 class 和 style 時，Vue.js 專門增強了它。表達式的結果類型除了字串之外，還可以是物件或陣列。

事件處理器：在Vue中我們可以透過v-on來給元素註冊事件，完成事件註冊，Vue中的事件處理和平時使用的事件處理不同之處就是，既可以綁定數據處理函數，也可以使用內嵌處理器

表單控制項：你可以用v-model指令在表單控制項元素上建立雙向資料綁定。它會根據控制項類型自動選取正確的方法來更新元素。 Vue中對於表單控制項提供的v-model*指令非常的使用，可以方便的傳回或設定表單控制項的資訊。

ajax資料請求：vue2.0中資料請求推薦使用axios

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

2、react資料綁定

React中透過將state（Model層） 與View層資料進行雙向綁定達到資料的即時更新變化，具體來說就是在View層直接寫JS程式碼將Model層中的資料拿過來渲染，一旦像表單操作、觸發事件、ajax請求等觸發資料變化，則進行雙向同步，所以說React的特點是元件化。

接著我們來看看vue.js與react元件的對比

#1、react的元件與資料流

React中實作元件有兩種方式，一種是createClass方法，另一種是透過ES2015的思想類別繼承React.Component來實作。

react元件之間有兩種資料通訊。第一種是父子元件之間的資料通訊。第二種也就是非父子組件之間的資料通訊。

父子元件之間的資料通訊：

在React中，父與子之間的資料通訊是透過props屬性就行傳遞的；而子與父之間的資料通訊可以透過父元件定義事件，子元件觸發父元件中的事件時，透過實參的形式來改變父元件中的資料來通訊。

非父子元件之間的資料通訊：

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

react元件的生命週期：

construtor() //创建组件 
componentWillMount() //组件挂载之前 
componentDidMount() // 组件挂载之后 
componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数 
shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true 
componentDidUpdate() // 更新 
render() //渲染，react中的核心函数 
componentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除

2、Vue中的元件與資料流

Vue預設的是單向資料流，這是Vue直接提出來說明的，父元件預設可以向子元件傳遞數據，但是子元件向父元件傳遞資料就需要額外設定了。

父子元件之間的資料通訊是透過Prop和自訂事件實現的，而非父子元件可以使用訂閱/發布模式實作（類似Angualr中的非父子指令之間的通訊），再複雜一點也是建議使用狀態管理（vuex）。

vue元件的生命週期：

每個 Vue 實例在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載實例到 DOM、在資料變更時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，給予使用者機會在一些特定的場景下加入自己的程式碼。

例如 created 鉤子可以用來在一個實例被創建之後執行程式碼，也有一些其它的鉤子，在實例生命週期的不同場景下調用，如 mounted、updated、destroyed。鉤子的 this 指向呼叫它的 Vue 實例。

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

1、react中的路由

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

2、vue中的路由

Vue 的路由庫和狀態管理庫都是由官方維護支援且與核心庫同步更新的；使用Vue.js ，我們已經可以透過組合元件來組成應用程序，當你要把vue-router 加入進來，我們需要做的是，將元件(components)對應到路由(routes)，然後告訴vue-router 在哪裡渲染它們。

最後我們來看看vue.js和react狀態管理的比較

1、react中的狀態管理：Flux

Redux 是React 生態環境中最受歡迎的Flux 實作。 Redux 事實上無法感知視圖層，所以它能夠輕鬆的透過一些簡單綁定和 Vue 一起使用。

2、vue中的狀態管理：vuex

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

每一個 Vuex 應用程式的核心就是 store（倉庫）。 「store」基本上就是一個容器，它包含著你的應用程式中大部分的狀態。

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

以上是vue.js和react的比較：react好還是vue.js好的詳細內容。更多資訊請關注PHP中文網其他相關文章！