Vue中的数据代理

MVVM模型：

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象 

 Object.defineProprty：

Vue的底层使用了Object.defineProprty，Object.defineProperty()方法会直接在一个对象上定义一个新属性。

      var num=18
      var person={
        name:"张三",
        sex:"男"
      }
       // 使用 Object.defineProperties(要添加属性的对象,"要添加的属性",{配置项})方法可以为对象添加一个新属性。
      Object.defineProperty(person,"age",{
        // value:18, //属性值
        // enumerable:true,//控制属性是否可以被枚举，默认值是false
        // writable:true,//控制属性是否可以被修改，默认值是false
        // configurable:true,//控制属性是否可以被删除，默认值是false

        //数据代理
        //当读取person的age属性时，get函数(getter)就会被调用，且返回值就是age值
        get(){
            console.log("age被读取了")
            return num
        },
        //当修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(val){
            console.log("age被修改了")
            num=val
        }
      })

数据代理 :

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

     var obj1={
        x:100
     }
     var obj2={
        y:200
     }
     //让obj2可以访问obj1的x并能修改x
     Object.defineProperty(obj2,"x",{
        get(){
            return obj1.x
        },
        set(val){
            obj1.x=val
        }
     })

Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

这样更加方便操作data中的数据。 

基本原理：

通过Object.defineProperty()将data对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter和setter

在getter和setter方法内部去操作（读/写）data中对应的属性