浅谈数据代理

数据代理，就是通过一个对象代理对另一个对象中属性的操作。

Vue中的数据代理，则是通过vm对象（vue的实例对象）代理data对象中属性的读写操作。

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

/* 通过proxy对象代理obj对象中a属性的读写操作 */

let obj = {a: 1};    // 被代理对象
let proxy = {};      // 代理对象

Object.defineProperty(proxy, 'a', {

    // enumerable: true,    // 配置为可枚举的
    // writable: true,      // 配置为可修改的
    // configurable: true,  // 配置为可删除的

    /* 读取属性值时，get调用 */
    get() {
        return obj.a;
    },

    /* 修改属性值时，set调用 */
    set(value) {
        obj.a = value;
    }
})

参考尚硅谷Vue技术_理解数据代理