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
