如果覺得不錯(cuò)的話，請(qǐng)點(diǎn)一下贊吧 ??
本文章會(huì)持續(xù)更新中。。。
2016年，vuejs可謂是大放異彩，以迅雷不及掩耳之勢趕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 元素的各種事件，在檢測到 View 狀態(tài)變更后，將變更的數(shù)據(jù)發(fā)送到 Model。
AngularJS：采用“臟值檢測”的方式，數(shù)據(jù)發(fā)生變更后，對(duì)于所有的數(shù)據(jù)和視圖的綁定關(guān)系進(jìn)行一次檢測，識(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ā)一次“臟值檢測”。
VueJS：采用 ES5 提供的 Object.defineProperty() 方法，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測。
一、VueJS雙向數(shù)據(jù)綁定實(shí)現(xiàn)
（1）Object.defineProperty簡單應(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>
