Proxy使用场景

定义

• Proxy是ES6新增的功能，可以用来自定义对象中的操作
• let p = new Proxy(target,handler)中，targe代表需要添加代理的对象，handler用来自定义对象中的操作，比如可以用来自定义get或者set函数

实现数据响应式

• Vue3.0中通过Proxy来替换原本的Object.defineProperty来实现数据响应式

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函数的方式，在原本的逻辑中插入了自定义的函数逻辑，实现了在对对象任何属性进行读写时发出通知的功能
• 如果需要实现一个Vue中的响应式，需要在get中手机依赖，在set中派发更新，Vue3.0用Proxy替换原有的api原因在于Proxy无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的api有一些数据更新并不能监听到，Proxy可以监听到任何方式的数据改变，但是会涉及到部分浏览器的兼容性问题和性能问题

----------------------------------------------------------------------------------------------2024.4.30每日一题