vue2 vue3响应式原理

vue2

  <script>
        let obj = {
            name:'张三',
            age:18
        }
        let p = {}
        Object.keys(obj).forEach(r=>{
            Object.defineProperty(p,r,{
                get(){
                    console.log('访问obj的属性')
                    return obj[r]
                },
                set(val){
                    console.log('obj属性被修改',val)
                    obj[r] = val
                }
            })
        })
    </script>

vue3

 <script>
        let obj = {
            name:'张三',
            age:18
        }
        const p = new Proxy(obj,{
            get(target, property, receiver){
                console.log('访问属性',target,property,receiver)
                // return target[property]
                console.log(p === receiver) //receiver等价于proxy代理对象
                return Reflect.get(target,property)
            },
            set(target, property, receiver){
                console.log('修改属性',target, property, receiver);
                // target[property] = receiver
                Reflect.set(target,property,receiver)
            },
            deleteProperty(target, property){
                // console.log('删除属性');
                // return delete target[property]
                return Reflect.deleteProperty(target,property)
            }
        })
    </script>