Vue的Object.defineProperty中数据代理

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

详细说明可以查看官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

1.语法

Object.defineProperty(obj,prop,descriptor)

参数

• obj 要定义属性的对象
• prop 要定义或修改的属性的名称或者Symbol
• descriptor 要定义或修改的属性的描述符
• 返回值：被传递给函数的对象、

2.数据代理方面

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

    let obj1 = { x: 10 }
    let obj2 = { y: 20 }
    Object.defineProperty(obj2, 'x', {
      get() {
        return obj1.x
      },
      set(value) {
        obj1.x = value
      }
    })

说明：这里主要是为pbj2新添加了属性‘x'，同时这里的get()\set()均为x属性的方法，这里的作用是将obj1和obj2两者关联起来.

        get是获取到obj1的属性值，set作用是为了让当obj2改变的时候，同时也改变obj1；obj1shuangxiang.x改变的时候obj2也得到相应的改变，从而达到数据的双向绑定

3.vue中的数据双线绑定的原理

首先这里先提一下vue中MVVM模型，其中：

1. M指的是model，即是data中的数据
2. VM指的是ViewModel，即是视图模型，即是vue实力
3. V指的是View，即是视图层
4. 在vue中会观察发现：
5. data中的所有属性，最后都出现在了vm身上
6. vm身上的所有属性及vue原型上所有，在Vue模板中都可以直接使用                        

 其中也是运用到了数据代理原理，如下图所示

总结：

1. vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2. vue中数据代理的好处：更加方便的操作data中的数据
3. 基本原理：

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