前端基础:ES6新增功能——Proxy， 可以实现什么功能?

在 Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。 因此学习和掌握 Proxy 是必然的。

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

let p = new Proxy(target, handler)

target 代表需要添加代理的对象，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(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 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，缺陷可能就是浏览器的兼容性不好。