在vue3中通过Proxy来替换原本的Object.defineProperty实现数据响应式。

Proxy是ES6中新增的功能，它可以用来自定义对象中的操作。

let p = new Proxy( target, handler)  handler用来自定义对象中的操作。

通过 Proxy 来实现数据响应式：

let onWatch = (obj, setBind, getLogger) => {let handler = {get(target, property, receiver){getLogger(target, property)return Reflect.get(target, property, receiver)},set(target, property, value, receiver){setBind(value, property)return Reflect.set(target. property, value)}}return new Proxy(obj, handler)
}let obj = { a: 1 }let p = onWatch(obj,(v, property) => {console.log(`监听到属性${property}改变为${v}`)},(target, property) =>{console.log(`'${property}' = ${target[property]}`)}
)
p.a = 2 // 监听到属性a变化
p.a // 'a' = 2

通过自定义set和get函数的方式，在原本的逻辑中插入逻辑函数，实现了在对对象任何属性进行读写时发出通知。在get收集依赖，在set派发更新。Proxy可以完美监听到任何方式的数据改变，唯一缺陷就是浏览器的兼容性不好。