关于vue的访问属性代理

vue 有一个特点，可以通过访问 vm 的实例属性，直接访问到 vm 初始化时 data 的属性值。

const vm = new Vue({
    data() {
        return {
            a: 123
        };
    }
});

console.log(vm.a); // 123

这个其实是一个代理模式的实现, 对 vm 实例进行键值的代理

实现方式:

let a = {
    data: {
        b: 123
    }
};

/**
 * 实现访问 a.b === 123
 */
function proxy(target: Object, sourceKey: string): void {
    let data = target[sourceKey];
    let keys = Object.keys(data);
    for (let i = 0, l = keys.length; i < l; i++) {
        let key = keys[i];
        Object.defineProperty(target, key, {
            enumerable: true,
            configurable: true,
            set(val) {
                this[sourceKey][key] = val;
            },
            get() {
                return this[sourceKey][key];
            }
        });
    }
}

proxy(a, "data");

console.log(a.b); // 123

浏览器执行结果

image