百度前端技术学院---vue动态数据绑定-2
1.如果设置新的值是一个对象的话,新设置的对象的属性是否能能继续响应 getter 和 setter
在上一步的基础上,我们直接设置data属性,是不会响应的,如:
app1.data.user = {a:1};
app1.data.user.a;
(function(){
window.Observer = function(data){
this.data=data;
this.makeObserver();
};
Observer.prototype.makeObserver = function(){
for(var key in this.data){
if(!this.data.hasOwnProperty(key))return;
var val = this.data[key];
if(typeof val === 'object'){
new Observer(val);
}
this.setObserver(val,key);
};
};
Observer.prototype.setObserver = function(val,key){
var that = this;
Object.defineProperty(that.data,key,{
enumerable: true,
configurable: true,
get:function(){
console.info("你访问了"+key);
return val;
},
set:function(newValue){
if(typeof newValue === 'object'){
new Observer(newValue);
};
console.info("你设置了"+key+",新的值为",newValue);
if(val === newValue)return;
val = newValue;
}
});
};
})()
//在set中,通过判断newValue是否是对象,来设置新对象的属性;
var app1 = new Observer({
user:{
ha:1
}
});
app1.data.user={
name:2
};
app1.data.user.name=3;
/*
输出:
你设置了user,新的值为 Object {}
你访问了user
你设置了name,新的值为 3
*/
2.数据改变时,需要回调函数
通过原型上建立一个watchArr对象,保存监听属性和回调函数,在set触发时执行
(function(){
window.Observer = function(data){
this.data=data;
this.makeObserver();
};
//监听对象
Observer.prototype.watchArr = {};
Observer.prototype.makeObserver = function(){
for(var key in this.data){
if(!this.data.hasOwnProperty(key))return;
var val = this.data[key];
if(typeof val === 'object'){
new Observer(val);
}
this.setObserver(val,key);
};
};
Observer.prototype.setObserver = function(val,key){
var that = this;
Object.defineProperty(that.data,key,{
enumerable: true,
configurable: true,
get:function(){
console.info("你访问了"+key);
return val;
},
set:function(newValue){
if(typeof newValue === 'object'){
new Observer(newValue);
};
console.info("你设置了"+key+",新的值为",newValue);
if(val === newValue)return;
if(that.watchArr[key]){
//如果监听对象对应key存在,则执行回调
for(var i = 0;i<that.watchArr[key].length;i++){
that.watchArr[key][i](newValue,val);
}
}
val = newValue;
}
});
};
//监听函数
Observer.prototype.$watch = function(key,fn){
if(!this.watchArr[key]){
this.watchArr[key]=[];
};
this.watchArr[key].push(fn);
};
return this;
})()
var app1 = new Observer({
user:{
info:1
},
age:10
});
app1.data.user={
name:2
};
app1.$watch('name', function(name,oldname) {
console.log(`我的名字${oldname}变了,现在已经是:${name}`)
}).$watch('age', function(age,oldage) {
console.log(`我的年龄${oldage}变了,现在已经是:${age}`)
});
app1.data.user.name=3;
app1.data.age=33;
/*
输出为:
你设置了user,新的值为 Object {}
你访问了user
你设置了name,新的值为 3
我的名字2变了,现在已经是:3
你设置了age,新的值为 33
我的年龄10变了,现在已经是:33
*/