百度前端技术学院---vue动态数据绑定-1

---

百度前端技术学院+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
*/