百度前端技术学院+vue动态绑定,两个都是自己最有兴趣的地方,一步一步跟随前人脚步学习;
动态数据绑定就是 Vue 最为基础,最为有用的一个功能。从最简单的开始。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性?
(function(){
window.Observer = function(data){
this.data=data;
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.walk(val,key);
}
};
Observer.prototype.walk = function(val,key){
Object.defineProperty(this.data,key,{
enumerable: true,
configurable: true,
get:function(){
console.info("你访问了"+key);
//需要return一个值,不然会是undefine
return val;
},
set:function(newValue){
console.info("你设置了"+key+",新的值为"+newValue);
if(val === newValue)return;
val = newValue;
//引用类型,传递的是地址,set中是通过赋值或赋址,而不是return
}
})
};
})()
var app1 = new Observer({
_name:{
a:"a",
b:"b"
},
age: 25
});
var app2 = new Observer({
university: 'bupt',
major: 'computer'
});
app1.data._name;
app1.data._name.a;
app1.data._name.b="c";
app1.data.age = 100;
app2.data.university;
app2.data.major = 'science';
/*
输出为:
你访问了_name
你访问了_name (在访问_name.a时,先会访问到_name)
你访问了a
你访问了_name
你设置了b,新的值为c
你设置了age,新的值为100
你访问了university
你设置了major,新的值为science
*/