TA貢獻1829條經驗 獲得超13個贊
監聽 data 變化的原理：
/**
Observer是將輸入的Plain Object進行處理,利用Object.defineProperty轉化為getter與setter,
從而在賦值與取值時進行攔截
這是Vue響應式框架的基礎
*/
function isObject(obj){
return obj != null && typeof(obj) == 'object';
}
function isPlainObject(obj){
return Object.prototype.toString(obj) == '[object Object]';
}
function observer(data){
if(!isObject(data) || !isPlainObject(data)){
return;
}
return new Observer(data);
}
var Observer = function(data){
this.data = data;
this.transform(data);
};
Observer.prototype.transform = function(data){
for(var key in data){
var value = data[key];
Object.defineProperty(data,key,{
enumerable:true,
configurable:true,
get:function(){
console.log("intercept get:"+key);
return value;
},
set:function(newVal){
console.log("intercept set:"+key);
if(newVal == value){
return;
}
data[key] = newVal;
}
});
//遞歸處理
this.transform(value);
}
};
參考：理解 vue 實現原理
舉報