Vue2学习第五篇：Vue中的数据代理

一、回顾js中的Object.defineProperty()方法

想要了解Vue中的数据代理，必须搞懂Object.defineProperty()这个方法，因为Vue中的数据代理底层用到的就是这个方法。

下面代码表示的是利用Object.defineProperty()往person对象里面添加一个age属性，值为18，当我们输出person的时候会多出一个值为18的age属性。但此时这个age属性是默认不可以被枚举（就是说不能被遍历出来）、被修改、被删除的，所以配置项里面除了value属性以外还可以有enumerable、writable、configurable等等属性，这些属性可以控制在person里面新增的age属性能够被遍历、被修改、被删除。此外，Object.defineProperty()里面还有两个最重要的配置项，set:function(){}函数和get:function(){}函数，但是对象里面配方法可以简写成set(){}和get(){}，后面我们会称它两为getter方法和setter方法。当有人读取person的age属性时，get函数（getter）就会被调用，且返回值是age的值，当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值，然后再把收到的值赋值给age的返回值，那么此时age的值就是被修改后的值。

不是说有getter和setter配置项的时候就不能写其他配置项（比如enumerable、configurable等等），这些配置项照样是控制age属性的，但是切记，writable与setter函数不能在配置项里面同时出现，否则报错。还有一点，我认为value与getter函数同时写没有意义，因为当有人读取的时候setter的返回值会作为age的值，此时不需要value值了吧，这是个人观点，勿喷哈，小编还想多活几年，可以相互讨论。

代码： 

二、何为数据代理

数据代理：通过一个对象代理对另一个对象中的属性进行操作（读/写）

代码解析：下面代码表示的是往obj2里面添加一个x属性，当有人读取obj2的x属性时，那么getter函数就会将obj里面x的属性值返回给obj2里面新增的x属性，当有人修改obj2的x属性时，会将修改后的新值赋值给obj的x属性，然后通过getter方法将这个值返回给obj2的x属性。这样就实现的了通过obj2的代理对obj里面的x属性进行操作（读/写）。

三、Vue中的数据代理

1.Vue中的数据代理：通过vm对象代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：更加方便的操作data中的数据

3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。