Vue.js---数据代理

数据代理：

        含义：通过一个对象访问、操作另一个对象中的属性。

        实现：可以通过Object.defineProperty()实现

let obj1 = { a: 100 };
let obj2 = { b: 200 };
Object.defineProperty(obj2, 'a', {
        get() {
            return obj1.a;
        },
        Set(value) {
            obj1.a = value;
        }
    })
    //第三个参数中可写的属性：
    //value--新绑定属性的属性值
    //writable--该新属性是否可以被重写
    //enumerable--该新属性是否可以被枚举，即是否可以通过for in遍历出来
    //configurable--该新属性是否可以被删除或修改特性（即上述参数是否可以被修改）

        当obj2.a被访问的时候自动调用get()方法，该方法的返回值即为obj2.a的值。

        当obj2.a被修改的时候自动调用set()方法，方法的参数为修改后的值，这里将其赋给obj1.a，相当于修改的时obj1.a的值。

Vue中的数据代理：

        我们知道，Vue的实例化对象中有一个属性_data，通过判断 构造Vue实例时传入的属性 data === _data 可知，两者相同。基本原理与上述例子大致一样，将data中的属性添加一份到Vue的实例化对象上，并且为这些属性都指定了get()、set()方法。每当这些属性被访问或修改时，则自动调用相应的方法，对data中的属性进行访问或修改。

        我们知道，对data中的属性进行改动时，页面中用到该属性的地方会重新渲染。而在通过Vue的实例化对象改变它自身的同名属性时，页面中相应的地方同样会重新渲染，也说明Vue在通过改变自身属性来改变data中的属性。

        这一点也可以通过Vue的开发者工具验证。

        此时是通过访问Vue实例化对象的属性来访问data中的属性，即符合我们数据代理的定义。

数据代理的优点： 

        方便编码，若不使用该数据代理，那么访问data中的属性就需要通过 _data.Property 来访问，有一点类似v-model双向绑定的感觉（雾）。

欢迎指正！