Vue源码系列之数据代理和数据劫持

数据代理和数据劫持

数据代理

有如下数据：

a:{
   
	b:{
   
		name:'张三';
	}
}
a.b.name // 张三

上述代码在访问name属性时需要a.b.name这样访问，那么如果能够直接使用a.name这样访问，就说对象a代理了a.b的任务，实现了数据代理。
那么在Vue中我们能够直接使用Vue实例对象访问到data中的数据就是将数据代理到了Vue实例对象下面，即vm.name代理了vm.$data.name。

数据劫持

数据劫持是实现数据代理的一种技术。Vue2.x中使用的是Object.defineProperty()，因此我们有必要学习下这个函数的作用。

在MDN中有如下描述：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

该方法需要传入三个参数，被定义的对象obj、obj中的属性名、描述符。其中描述符分为数据描述法和存取描述符。这里主要使用存取描述符就可以实现数据代理。
想要详细了解Object.defineProperty() 方法 可以访问MDN
存取描述符，有两个可选的值

• get，属性的getter函数，在访问对象的属性时会调用该方法。
• set，属性的setter函数，在访问对象的属性时会调用该方法。

通过一道题目来感受下这个方法的使用：

	let a;
	if(a==1 && a==2 && a==3){
   
		console.log('我进来了');
	}
	

问如何实现上述代码打印出我