Vue.js 3 中 Proxy 与 Reflect：同舟共济，响应式数据之道

2024-02-12 00:40:53

Vue.js 3 中的 Proxy 和 Reflect：响应式数据的神奇组合

Proxy：数据操作的幕后守护者

想象一下你在一个博物馆，博物馆里陈列着一幅价值连城的画作。为了保护画作，博物馆会在画作表面覆盖一层透明的玻璃。这层玻璃允许参观者欣赏画作，但同时又保护了画作免受灰尘和指纹的侵害。

Proxy 在 Vue.js 3 中扮演着类似的角色。它是一种 JavaScript 特性，允许我们创建对象代理，拦截并修改对原始对象的任何操作。当一个对象被声明为响应式时，Vue.js 使用 Proxy 创建一个代理对象，就像给原始对象覆盖了一层保护膜。

Reflect：恢复真实的本源

当 Proxy 拦截一个操作时，它会将操作信息传递给 Reflect 对象。Reflect 提供了一系列内建方法，用于操作 JavaScript 对象。就像博物馆里负责修复画作的专业修复师，Reflect 方法可以访问原始对象并对其进行操作，而不受代理对象的干扰。

Proxy 和 Reflect 的亲密合作

Proxy 和 Reflect 在 Vue.js 3 中携手合作，为响应式数据提供了坚实的基础。当我们对响应式对象进行操作时，例如获取或设置属性值，Proxy 会拦截该操作并调用相应的 Reflect 方法。Reflect 方法随后在原始对象上执行操作，并返回结果。这样一来，Vue.js 就可以在不修改原始对象的情况下跟踪和响应数据更改。

例如，当我们从响应式对象中获取一个属性值时，Proxy 会拦截该操作并调用 Reflect.get 方法。Reflect.get 方法将在原始对象上获取属性值，并将该值返回给 Proxy。Proxy 随后将该值返回给我们的应用程序代码，而应用程序代码并不会意识到对象已通过 Proxy 代理。

取值器的 this 指向问题

当我们在 Proxy 上调用取值器函数时，可能会遇到一个棘手的问题，即 this 指向问题。this 指向问题是指当一个取值器函数在代理对象上调用时，this 上下文将指向代理对象，而不是原始对象。为了解决这个问题，Vue.js 3 使用 Reflect.get 方法的 receiver 参数来指定原始对象作为 this 上下文。

代码示例：

const obj = {
  name: 'John'
};

const proxy = new Proxy(obj, {
  get(target, property) {
    return Reflect.get(target, property, obj);
  }
});

console.log(proxy.name); // 'John'