前言：最近團隊需要做一個分享，腳進腦子，不知如何分享。最後想著之前一直想研究一下 vue 源碼，今天剛好 “藉此機會” 研究一下。
網上研究vue資料綁定的文章已經非常多了，但是自己寫一遍，敲一遍demo和看別人的文章是完全不同的，so…搬運工來了
目前資料綁定主要有以下三種實作方式：
1. 髒值檢查（angular.js） 輪詢偵測資料變化
DOM事件，如使用者輸入文字，譬如使用者輸入文字，點選按鈕等。 ( ng-click )
XHR回應事件( $http )
瀏覽器Location變更事件( $location )
Timer事件( $timeout , $interval )
執行$digest() 或$ 2、Object.defineProperty劫持物件的get、set，從而實現資料的監控。 （vue）
3、發布/訂閱者模式實現資料與視圖的自動同步
Object.defineProperty的優點
「髒值偵測」－資料發生變更後，對於所有的資料和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變，有變化進行處理，可能進一步引發其他數據的改變，所以這個過程可能會循環幾次，一直到不再有數據變化發生後，將變更的數據發送到視圖，更新頁面展現
Object.defineProperty() 監控對資料的操作，可自動觸發資料同步。並且，由於是在不同的資料上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的資料都執行一次檢測。
Object.defineProperty的用法
var a = {};
Object.defineProperty(a, "b", {
set: function (newValue) {
console.log("我被赋值了！" + newValue);
},
get: function () {
console.log("我被取值了！");
return 2
}
})
a.b = 3; //我被赋值了！
console.log(a.b); //我被取值了! //打印 2由上面的例子看出，Object.defineProperty 傳人3個參數
第一個： a物件
第二個物件個： 屬性比較多，列舉有用的value，set，get，configurable
資料綁定原理：
1、實作一個資料監聽器Observer，對資料物件的所有屬性進行監聽，如有變動則拿到最新值並通知dep數組
2、實作一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換資料
3、實作一個dep數組，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的對應回呼函數，更新視圖
1. 實作observer
var data = {name: 'beidan'};
observe(data);
data.name = 'test'; // 监听到值变化了 beidan 变成 test
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
}function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newVal) {
console.log('监听到值变化了 ', val, ' 变成 ', newVal);
val = newVal;
}
});
}2. 維護一個陣列
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub);
},
notify: function (val) {
this.subs.forEach(function (sub) {
sub.update(val)
});
}
};
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
……
set: function(newVal) {
if (val === newVal) return;
console.log('监听到值变化了 ', val, ' 变成 ', newVal);
val = newVal;
dep.notify(val); // 通知所有订阅者
}
});
}內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！ 更多淺析vue資料綁定相關文章請關注PHP中文網！
