vue源碼學習之Object.defineProperty對象屬性監聽

let a = {'b': 1};
Object.defineProperty(a, 'b', {
 enumerable: false,
 configurable: false,
 get: function(){
 console.log('b' + '被訪問');
 },
 set: function(newVal){
 console.log('b' + '被修改，新' + 'b' + '=' + newVal);
 }
});

a.b = 2; // b被修改，新b=2
a.b; // b被訪問

// 觀察者構造函數
function Observer(data){
 this.data = data;
 this.walk(data);
}

let p = Observer.prototype;
p.walk = function(obj){
 let val;
 for(let key in obj){
 // 通過 hasOwnProperty 過濾掉一個對象本身擁有的屬性 
 if(obj.hasOwnProperty(key)){
 val = obj[key];
 // 遞歸調用 循環所有對象出來
 if(typeof val === 'object'){
 new Observer(val);
 }
 this.convert(key, val);
 }
 }
};

p.convert = function(key, val){
 Object.defineProperty(this.data, key, {
 enumerable: false,
 configurable: false,
 get: function(){
 console.log(key + '被訪問');
 },
 set: function(newVal){
 console.log(key + '被修改，新' + key + '=' + newVal);
 if(newVal === val) return ;
 val = newVal;
 }
 })
};

let data = {
 user: {
 name: 'zhangsan',
 age: 14
 },
 address: {
 city: 'beijing'
 }
}

let app = new Observer(data);
data.user.name; // user被訪問