学习vue的数据代理之前，我们需要先了解javascript的Object.defineProperty，因为vue底层大量运用了该技术点。

了解Object.defineProperty

顾名思义，object.defineproperty()就是给对象定义属性，它是Object对象上的一个方法。该方法有三个参数：

defineProperty(对象, 属性名称PropertyKey, 属性的描述符attributes)

---

首先定义一个对象：

let myObject = {name:"程序汪杨同学", age:18}

使用浏览器控制台Console查看myObject对象信息：

现在需要给myObject对象添加一个sex属性：

方式一： myObject.sex="男"

方式二： 使用defineproperty方法

Object.defineProperty(myObject, "sex", { value: "男" });

方法的第三个参数是对象形式，value定义sex属性的值；

我们发现sex属性的颜色与另外两个属性的颜色不一样。 经过上述两种方式定义对象，发现方式二：使用defineproperty方法是比较麻烦，那为什么js需要提供该方法呢？因为defineproperty方法定义的属性，其功能更灵活，能满足多种不同的业务场景。该方法的第三个参数是一个对象，该对象包含如下属性：

{
configurable: boolean;//是否可删除属性，可选，值类型：boolean
enumerable: boolean;//是否可枚举，可选
value: any;//属性值，可选
writable: boolean;//是否可以改变value的值，可选
get(): any;//读取
set(v: any): void;//赋值
}

---

我们刚刚使用到的仅仅是value属性，通过这些属性，我们自由控制属性功能。 例如enumerable默认是false，即不可遍历：

设置enumerable为true，使得myObject可遍历其属性

Object.defineProperty(myObject, "sex", { value: "男",enumerable:true} );

---

测试get、set方法

其它的属性大家可以自行去测试验证一下。

vue数据代理

现在我们正式进入vue的数据代理。 首先我们需要清楚数据代理的概念：通过一个对象代理对另一个对象中属性的读写操作。 例如我们定义有object1和object2两个对象，其中object1={a:1,b:2}，现在我们使用object2去读取和写入object1中的a、b属性，这个过程就是数据代理。具体的代码如下：

vue中的数据代理：

myVue实例上有name、age两个属性和其配套的get、set方法，同时我们也发现有_data。

通过上图，我们发现： 通过  mymyVue.name去获取vue里data的属性值； 通过Vue.name="帅气的程序汪杨同学" 去修改vue里data的属性值。 至此，我们不难发现： mymyVue 实例对象 通过数据代理的方式去操作了vue里data对象属性。