vue3

一、vue3最终响应式原理

let person = {
    name: '张三',
    age: 15,
}
//我们管p叫做代理数据，管person叫源数据
const p = new Proxy(person,{
    //target代表的是person这个源对象，propName代表读取或者写入的属性名
    get(target,propName){
        console.log('有人读取了p上面的propName属性')
        return Reflect.get(target, propName)
    },
    //不仅仅是修改调用，增加的时候也会调用
    set(target,propName,value){
        console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
        Reflect.set(target, propName, value)
    },
    deleteProperty(target,propName){
        console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
        return Reflect.deleteProperty(target,propName) 
    }
})