相同之處：
1拐纱、使用 Virtual DOM
2、提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件
3、將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫
不同之處：
在 React 應(yīng)用中史煎，當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí)谦屑，它會(huì)以該組件為根驳糯，重新渲染整個(gè)組件子樹。在 Vue 應(yīng)用中氢橙，組件的依賴是在渲染過程中自動(dòng)追蹤的酝枢，所以系統(tǒng)能精確知曉哪個(gè)組件確實(shí)需要被重渲染。
react 是函數(shù)式的思想悍手，把組件設(shè)計(jì)成純組件帘睦，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中坦康，是單向數(shù)據(jù)流竣付，推崇結(jié)合immutable來實(shí)現(xiàn)數(shù)據(jù)不可變。 改變state 之后重新渲染走完渲染流程滞欠，所以一個(gè)組件更新古胆，下面的子組件都會(huì)更新。react的性能優(yōu)化需要手動(dòng)去做筛璧，而vue的性能優(yōu)化是自動(dòng)的逸绎。 一般使用shouldComponentUpdate 優(yōu)化，或者PureComponent（PureComponent就是重寫了shouldComponentUpdate）
模板和 JSX：
1夭谤、React與Vue最大的不同是模板的編寫棺牧。
Vue鼓勵(lì)你去寫近似常規(guī)HTML的模板。寫起來很接近標(biāo)準(zhǔn)HTML元素朗儒，只是多了一些屬性颊乘。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
React推薦你所有的模板通用JavaScript的語法擴(kuò)展——JSX書寫.但使用JavaScript而不是模板來開發(fā)，賦予了開發(fā)者許多編程能力醉锄。
<ul className="pasta-list">
{
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
)
}
</ul>
性能：
1疲牵、在react中，當(dāng)組件狀態(tài)改變時(shí)榆鼠，它會(huì)觸發(fā)整個(gè)子組件數(shù)重新渲染纲爸，以根組件作為渲染基點(diǎn)。為了避免不必要的子組件重新渲染妆够，你需要使用PureComponent或者實(shí)現(xiàn) shouldComponentUpdate识啦。
2负蚊、在Vue中，一個(gè)組件在渲染期間依賴于自動(dòng)追蹤颓哮，因此系統(tǒng)知道提前預(yù)判哪一個(gè)組件需要渲染當(dāng)組件狀態(tài)發(fā)生改變時(shí)家妆。每個(gè)組件可以被認(rèn)為具有自動(dòng)為你實(shí)現(xiàn)shouldComponentUpdate，不需要注意嵌套的組件冕茅。
狀態(tài)管理：
1伤极、在React中一個(gè)比較大的內(nèi)容就是函數(shù)式編程。如果你用過現(xiàn)在流行的Redux狀態(tài)管理庫姨伤，你大部分的開發(fā)時(shí)間都是在寫函數(shù)式的內(nèi)容哨坪。
2、與Redux類似乍楚，Vuex也受到Flux的啟發(fā)当编。 然而，與Redux不同的是徒溪，Vuex改變了狀態(tài)忿偷，而不是使?fàn)顟B(tài)不可變，并像Redux的“reducer”函數(shù)一樣完全替代它臊泌。
vue 的雙向數(shù)據(jù)綁定：
vue 和react 其實(shí)都是單向數(shù)據(jù)流鲤桥，但是vue 支持雙向綁定。
先介紹一下 mvvm：
JS 幾個(gè)流行的框架 Vuejs渠概、Ember.js茶凳、AngularJS 都使用 MVVM 模式，該模式叫做視圖模型雙向數(shù)據(jù)綁定高氮，以達(dá)到數(shù)據(jù)和視圖快速同步的目的慧妄。
- View: 視圖，模板剪芍，顯示數(shù)據(jù)的塞淹；
- Model： 代表數(shù)據(jù)，可以在 Model 層中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯
- ViewModel ：連接 Model 和 View罪裹。
那么如何通過ViewModel 鏈接View 和Model 達(dá)到數(shù)據(jù)同步呢饱普？
1、Model （數(shù)據(jù)）-> View（視圖）状共，
2套耕、View（視圖）-> Model （數(shù)據(jù)）
實(shí)現(xiàn)數(shù)據(jù)傳遞，我們就要去監(jiān)聽數(shù)據(jù)變化和視圖的變化
監(jiān)聽DOM 改變：
- 就是 DOM 的改變峡继，我們監(jiān)聽到之后冯袍，將模型變量 message 做同步更改！就是視圖改變傳遞到了模型上
監(jiān)聽模型數(shù)據(jù)變化，數(shù)據(jù)劫持:
var o = {}; // 創(chuàng)建一個(gè)新對(duì)象
// 在對(duì)象中添加一個(gè)屬性與存取描述符的示例
var messageValue;
Object.defineProperty(o, "message", {
get : function(){
return messageValue;
},
set : function(newValue){
messageValue = newValue;
},
});
關(guān)于
Object.defineProperty大家可以參考：Object.defineProperty康愤。除此之外 ES6 的 Proxy 也可以完成此項(xiàng)功能儡循。據(jù)稱 vue3 就會(huì)使用 Proxy 代替 defineProperty。
觀察者模式征冷，Observer
觀察者模式（也叫模型 Model - 視圖 View 模式择膝、源 Source - 收聽者 Listener 模式或從屬者模式）是設(shè)計(jì)模式的一種。在此模式中检激，一個(gè)目標(biāo)對(duì)象管理所有依賴它的觀察者對(duì)象肴捉，并且在本身的狀態(tài)改變時(shí)發(fā)出通知。也就是本例中叔收，模型就是目標(biāo)對(duì)象齿穗，而所需要更新的各種視圖DOM就是觀察者。
