vue2和vue3响应式原理

1、vue2 响应式原理

       //源数据
        let person = {
            name: '张三',
            age: 10
        }
        //vue2中响应式
        //#region
         let p = {};
         给p加了个name属性，值是undefined
         Object.defineProperty(p, 'name', {}) 

         Object.defineProperty(p, 'name', {
            configurable: true,
             //只要读取name属性就会触发get方法
             get() {
                 console.log('我得到了');
                 return person.name
             },
             //只要修改name属性就能触发set方法
             set(value) {
                 console.log('有人修改了name属性');
                 person.name = value
             }
         })
        //这种用Object.defineProperty添加新的属性和删除已有的属性就是不响应式的了
        //#endregion

2、vue3 响应式

//vue3响应式
        // window.Proxy window内置的构造函数，不用下载不用安装
        // let p=new Proxy(代理的源对象,{})
        // let p = new Proxy(person, {}) //把p映射到person对象上面，做到响应。console.log(p)可以看到效果
        let p = new Proxy(person, {
            get(target, propName) {
                console.log('读取了p的属性');
                return target[propName]
            },
            set(target, propName, value) {
                console.log('修改或者添加了p的属性');
                return target[propName] = value;
            },
            deleteProperty(target, propName) {
                console.log('执行了删除操作');
                return delete target[propName];
            }
        })

但是vue3底层是用 Reflect