前端面试：Proxy 可以实现什么功能？

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

Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。
let p = new Proxy(target, handler)
代表需要添加代理的对象， handler 用来自定义对象的操作，比如可以用来自定义 set 或者 get 函数。
下面来通过 Proxy 来实现一个数据响应式：

let onWatch = (obj, setBind, getLogger) => {
    let handler = {
        get(target, property, receiver) {
            getLogger(target, property)
            return Reflect.get(target, property, receiver)
        },
        set(targer, 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(`监听到属性${proterty}改变为${v}`)
    },
    (target, property) => {
        console.lot(`'${proterty}' = ${target[property]}`)
        }
    )
    p.a = 2 // 监听到属性a改变
    p.a // 'a' = 2

在上述代码中，通过自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。 当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷就是浏览器的兼容性不好。