Vue数据代理

Vue数据代理实现原理

1. 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2. vue 数据代理: 通过 vm 对象（即this）来代理 data 对象中所有属性的操作
3. 好处: 更方便的操作 data 中的数据
4. 基本实现流程
   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

数据代理就实现了，欢迎大家批评指教