Vue响应式原理

// 数据源对象
let person = {
    name: '张三'
}

// 数据源对象的代理对象
let p = {}
Object.defineProperty(p, 'name', {
    // 读取代理对象p的name属性时调用
    get() {
        // 双向绑定更新
        return person.name
    },

    // 修改代理对象p的name属性时调用
    set(value) {
        // 响应式修改页面处理
        person.name = value
    }
})

// 数据源对象
let person = {
    name: '张三',
    age: 18
}

// 数据源对象的代理对象
const p = new Proxy(person, {
    // 读取代理对象p的某一属性时调用
    get(target, propName) {
        // 双向绑定更新
        return Reflect.get(target, propName)
    },

    // 修改或增加代理对象p的属性时调用
    set(target, propName, value) {
        // 响应式修改页面处理
        Reflect.set(target, propName, value)
    },

    // 删除代理对象p的某一属性时调用
    deleteProperty(target, propName) {
        // 响应式修改页面处理
        return Reflect.deleteProperty(target, propName)
    }
})