vue3 proxy 原理

在 Vue 3 中，`Proxy` 是一种新的特性，它可以用来代理 JavaScript 对象，提供了对对象的拦截和自定义操作的能力。在 Vue 3 中，`Proxy` 被用于实现响应式系统。

Vue 3 的响应式系统使用了 `Proxy` 对象来劫持数据对象，并在访问和修改数据时进行拦截。当我们访问一个被响应式代理的对象的属性时，`Proxy` 会触发 `get` 拦截器，并返回属性的值。而当我们修改一个被代理对象的属性时，`Proxy` 会触发 `set` 拦截器，并更新属性的值。

下面是一个简单的示例，演示了如何使用 `Proxy` 实现简单的响应式系统：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // 在访问属性时触发
      console.log('get', key);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      // 在修改属性时触发
      console.log('set', key, value);
      return Reflect.set(target, key, value);
    }
  });
}

const obj = reactive({ count: 0 });

console.log(obj.count); // 输出: get count 0
obj.count = 1; // 输出: set count 1

通过 `Proxy` 对象的 `get` 和 `set` 拦截器，我们可以监听数据的读取和修改动作，并触发相应的操作。这样就实现了响应式系统的基本原理。

需要注意的是，`Proxy` 并不是 Vue 3 独有的特性，它是 ECMAScript 6 中新增的语言特性，可以在其他 JavaScript 环境中使用。而在 Vue 3 中，`Proxy` 被用于实现了更高效和灵活的响应式系统。