使用Proxy替代Object.defineProperty

为什么使用 Proxy 替代 Object.defineProperty，简单总结Proxy的几点优势

Proxy 是对整个对象的代理，而 Object.defineProperty 只能代理某个属性
对象上新增属性，Proxy 可以监听到，Object.defineProperty 不能
数组新增修改，Proxy 可以监听到，Object.defineProperty 不能
若对象内部属性要全部递归代理，Proxy 可以只在调用的时候递归，而 Object.definePropery 需要一次完成所有递归，性能比 Proxy 差

使用也很简单，Proxy本质是构造函数，通过new即可产生对象，它接收两个参数：

target表示的就是要拦截（代理）的目标对象
handler是用来定制拦截行为（13种）

例如响应式reactive的基本实现：

function reactive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            // 可以做依赖收集
            track(target, key)
            return target[key]
        },
        set(target, key, val) {
            target[key] = val
            // 触发依赖
            trigger(target, key)
        }
    })
}

作者：LBJ
链接：https://juejin.cn/post/7072274726940311588
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。