vue2和vue3的响应式原理

• vue2的响应式原理 - Object.defineProperty()
  • 需要传入三个参数：响应式数据的对象、对象需要读写的属性、相对应的对象方法（get/set）

vue2响应式原理

// 源数据
let person = {
    name: 'elio',
    age: 25
}

// 模拟Vue2中实现响应式
let p = {};
Object.defineProperty(p, 'name', {
    get() {
        return person.name;
    }
    set(value) {
        person.name = value;
    }
});
Object.defineProperty(p, 'age', {
    get() {
        return person.age;
    }
    set(value) {
        person.age = value;
    }
})

• vue3响应式原理 - ES6新增的Proxy方法
  • 需要在Proxy的实例对象中传入两个参数（源数据对象、处理对象的方法）

vue3响应式原理

// 模拟Vue3中实现响应式
// 源数据
let person = {
    name: 'elio',
    age: 25
}

const p = new Proxy(person, {
    get(target, prop) {
        return Reflect.get(target, prop);
    }
    set(target, prop, value) {
         return Reflect.set(target, prop, value)
    }
    deleteProperty(target, prop) {
        return Reflect.deleteProperty(target,prop);
    }
})