如果覺得不錯(cuò)的話夜牡，請(qǐng)點(diǎn)一下贊吧 ??
本文章會(huì)持續(xù)更新中商架。堰怨。。
2016年蛇摸，vuejs可謂是大放異彩备图，以迅雷不及掩耳之勢(shì)趕React超Angular，用慣jquery的我一下子被Vue開篇介紹的雙向綁定給驚著了赶袄！一下子按捺不住好奇心揽涮，打算刨根究底，看看雙向綁定到底是怎樣實(shí)現(xiàn)的饿肺？
目標(biāo)
第二個(gè)版本：更新AngularJS雙向綁定的實(shí)現(xiàn)原理
第三個(gè)版本：更新BackboneJS雙向綁定的實(shí)現(xiàn)原理
第四個(gè)版本：更新ReactJS雙向綁定的實(shí)現(xiàn)原理
前言
發(fā)布者-訂閱者模式(backbone.js): 一般通過sub, pub的方式實(shí)現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽蒋困，更新數(shù)據(jù)方式通常做法是 vm.set('property', value)。
數(shù)據(jù)劫持(vue.js): 通過Object.defineProperty()來劫持各個(gè)屬性的setter敬辣，getter雪标，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者零院，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。（采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式）
關(guān)于數(shù)據(jù)綁定
（1）單向數(shù)據(jù)綁定
目前前端框架大都采用MV*的模式村刨，其中M（model）指的是模型告抄，也就是數(shù)據(jù)；V（view）指的是視圖嵌牺，也就是頁面展現(xiàn)的部分打洼。通常，我們需要編寫代碼逆粹，將從服務(wù)器獲取的數(shù)據(jù)進(jìn)行“渲染”并展現(xiàn)到視圖上拟蜻。每當(dāng)數(shù)據(jù)有變更時(shí)，我們會(huì)再次進(jìn)行渲染枯饿，從而更新視圖酝锅，使得視圖與數(shù)據(jù)保持一致。也就是：
而另一方面奢方，頁面也會(huì)通過用戶的交互搔扁，產(chǎn)生狀態(tài)、數(shù)據(jù)的變化蟋字，這個(gè)時(shí)候稿蹲，我們則編寫代碼，將視圖對(duì)數(shù)據(jù)的更新同步到數(shù)據(jù)鹊奖，以致于同步到后臺(tái)服務(wù)器苛聘。也就是：
（2）雙向數(shù)據(jù)綁定
Backbonejs：Model 到 View 的數(shù)據(jù)傳遞，可以在 View 中監(jiān)聽 Model 的 change 事件忠聚，每當(dāng) Model 更新设哗，View 中重新執(zhí)行 render。而 View 到 Model 的數(shù)據(jù)傳遞两蟀，可以監(jiān)聽 View 對(duì)應(yīng)的 DOM 元素的各種事件网梢，在檢測(cè)到 View 狀態(tài)變更后，將變更的數(shù)據(jù)發(fā)送到 Model赂毯。
AngularJS：采用“臟值檢測(cè)”的方式战虏，數(shù)據(jù)發(fā)生變更后，對(duì)于所有的數(shù)據(jù)和視圖的綁定關(guān)系進(jìn)行一次檢測(cè)党涕，識(shí)別是否有數(shù)據(jù)發(fā)生了改變烦感，有變化進(jìn)行處理，可能進(jìn)一步引發(fā)其他數(shù)據(jù)的改變膛堤，所以這個(gè)過程可能會(huì)循環(huán)幾次手趣，一直到不再有數(shù)據(jù)變化發(fā)生后，將變更的數(shù)據(jù)發(fā)送到視圖骑祟，更新頁面展現(xiàn)回懦。如果是手動(dòng)對(duì) ViewModel 的數(shù)據(jù)進(jìn)行變更气笙，為確保變更同步到視圖，需要手動(dòng)觸發(fā)一次“臟值檢測(cè)”怯晕。
VueJS：采用 ES5 提供的 Object.defineProperty() 方法潜圃，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步舟茶。并且谭期，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖吧凉，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)隧出。
一、VueJS雙向數(shù)據(jù)綁定實(shí)現(xiàn)
（1）Object.defineProperty簡(jiǎn)單應(yīng)用
<pre>
var obj = {};
Object.defineProperty(obj, 'hello', {
get: function() {
console.log('get方法獲取值');
},
set: function(val) {
console.log('set方法設(shè)置的值為：' + val);
}
});
obj.hello; // get方法獲取值
obj.hello = 'Hello World';
</pre>
