Vue数据代理实现原理
- 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
- vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作
- 好处: 更方便的操作 data 中的数据
- 基本实现流程
a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
b. 所有添加的属性都包含 getter/setter
c. getter/setter 内部去操作 data 中对应的属性数据
function MVVM(option) {
this.$option = option;
let data = (this._data = this.$option.data);
Object.keys(data).forEach((key) => {
Object.defineProperty(this, key, {
configurable: false,
enumerable: true,
get() {
return this._data[key];
},
set(newValue) {
this._data[key] = newValue;
},
});
});
}
const vm = new MVVM({
el: "#mvvm",
data: {
name: "MVVM",
},
});
console.log(vm.name); //MVVM
vm.name = "loki";
console.log(vm.name); //loki
数据代理就实现了,欢迎大家批评指教