Proxy核心概念

最新推荐文章于 2022-07-21 10:43:04 发布

原创最新推荐文章于 2022-07-21 10:43:04 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#proxy

本文探讨了Proxy在JavaScript中如何用于实现属性的get和set拦截，对比传统的Object.defineProperty方法，展示了Proxy在性能和数据监听上的优势。通过示例代码，详细解释了如何使用Proxy来监控对象属性的变化，以及其在Vue3.0中对数据响应式的应用。

属性get set拦截
Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。

var target = {
   name: 'poetries'
 };
 var logHandler = {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);
 
 targetWithLog.name; // 控制台输出：name 被读取
 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 
 console.log(target.name); // 控制台输出: others

Proxy 实例也可以作为其他对象的原型对象

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