Vue 理解数据代理 object.defineProperty

要想理解数据代理就需要对object.defineProperty这个方法特别熟。这个方法在object身上，名字叫做defineProperty，这个方法可不要小瞧，vue底层很多地方都使用到了。

比如vue里面使用的数据劫持就使用到了这个方法，数据代理用到了这个方法，后面计算属性也使用到了这个方法。

给对象添加属性

这个defineProperty就是给一个对象添加属性使用的，或者说给一个对象定义属性用的。

这里传入三个参数，第一个是给哪个对象添加属性，第二个添加的属性叫做什么名字，最后就是一个特别重要的参数叫做配置项，配置项里面可以写很多的配置。

其实你在person对象里面直接添加age属性就行了，但是这种方式没有defineProperty方法高级。

enumerable: true  控制属性是否可以枚举，默认值是false

如果属性可以遍历那就需要借助另外一个配置项了， enumerable，这样虽然可以遍历了，但是需要修改该属性值还是修改不了的。 

writable: true  可以修改属性值   configurable: true  可以删除属性值

上面方法和四个配置项看起来复杂，但是可以对追加的配置项的属性进行很多高级的限制，比如能不能修改，能不能删除，能不能枚举。

---------------------------------------------------------------------------------------------------------------------------------

上面都是基本的配置项，其实还可以传高级的配置项。

现在需要让person对象有一个age属性，age属性保存年龄，并且它的数值是读取num变量读取出来的，而不是自己定义的，并且这个age的值的变化跟着num变量一起变化。

这里就需要借助defineProperty，这里面能够写一个配置，配置的名称叫做get，值是一个函数。

有没有一种感觉，person和num其实是两个东西，借助defineProperty让其产生关联。得有这种体会，person确实是一个对象，确实有age属性，但是值现用，我们也现取，取靠get，要改就调用set，并且将值给你拿过来。（这个get和set是非常重要的）

 

 

数据代理的定义

---

通过一个对象代理另外一个对象中属性的操作（读写）。

有个对象obj，它有一个属性是x，想访问就obj.x，或者obj.x=xxx直接赋值就行。

现在有obj2，希望让obj2也能够访问到obj.x，也希望obj2以后能够修改这个x，这就是通过一个对象obj2，代理另外一个对象obj中属性的操作。

下面就是最简单的数据代理：obj1可以操作自身的x，但是obj2可以通过数据代理操作obj1的x，这就高级了，这就是数据代理。