vue2和vue3数据代理的区别

前言：

vue2 的双向数据绑定是利⽤ES5的⼀个 API ，Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。
vue3 中使⽤了 ES6的Proxy代理对象，通过 reactive() 函数给每⼀个对象都包⼀层Proxy，通过 Proxy监听属性的变化，从而实现对数据的代理操作。

一，Object.defineProperty( )

  let obj = { }let val = ''Object.defineProperty(obj,'name',{enumerable: true, // 表示该属性是否可以在 for...in 循环中被枚举。默认为 false。configurable: true, // 能否被删除 默认falseget(){console.log(`访问name属性`)return val },set(newVal){console.log('newVal',newVal);val = newVal}})obj.name = 'coderkey' // 触发set方法
console.log(obj.name);  // 触发get方法
obj.age = '18'   // 不会触发set方案
console.log(obj.age); // 不会触发get方法
delete obj.name;   // 不会触发set方案

注意：只能访问和修改，新增和删除不会触发set方法

二，Proxy代理对象

let obj = {name: 'coderkey',age: 18,habby: {try1: '篮球鸡坤',try2: '足球'}
}
let handler = {// 访问get(target, prop) {console.log('触发get方法',target[prop]);return Reflect.get(target, prop)},// 修改与新增set(target, prop, value) {console.log('触发set方法',value);//通过反射对象把数据反射出去return Reflect.set(target, prop, value)},// 删除deleteProperty(target, prop) {console.log('触发delete方法');return Reflect.set(target, prop)}
}
let proxyObj = new Proxy(obj,handler)// 通过代理对象对目标对象进行增删改查操作
proxyObj.name = 'pink' // 触发set方法
proxyObj.sex = '男'  // 触发set方法
console.log(proxyObj.sex); // 触发get方法
delete proxyObj.sex // 触发deleteProperty方法
console.log(proxyObj.sex); // 触发get方法 undefined
console.log(proxyObj); // 代理对象 {name: 'pink', age: 18, sex: undefined} 

注意: 可以代理同一层对象，可以增删改查操作