JS `Proxy` 实现 `Vue 3` 响应式系统原理：`Reflect` 结合拦截器

各位观众老爷，今天咱们聊聊 Vue 3 响应式系统的幕后英雄——Proxy 和 Reflect。说白了，这俩家伙就是 Vue 3 实现响应式数据的秘密武器。别怕，听起来高大上，其实原理简单粗暴，就像隔壁老王家的菜刀，看着吓人，用起来顺手。

开场白：响应式是个啥？

在深入 Proxy 和 Reflect 之前，咱们先搞清楚啥叫“响应式”。简单来说，就是当你的数据发生变化时，UI 界面能够自动更新，不用你手动去刷。就好像你银行卡余额变动了，手机 APP 会立马显示最新的数字，这就是响应式。

Vue 3 的目标，就是让你的数据变动能够自动“通知” UI，让 UI 跟着更新。怎么实现呢？就要靠我们今天的主角 Proxy 和 Reflect 了。

第一幕：Proxy——数据的“守门员”

Proxy，顾名思义，就是“代理”。它可以拦截对一个对象的操作，并在这些操作前后做一些手脚。你可以把它想象成一个守门员，所有对数据的访问和修改都要经过它。

Proxy 的基本语法如下：

const target = {  // 目标对象，你要代理的对象
  name: '张三',
  age: 18
};

const handler = {  // 处理器对象，定义拦截行为
  get(target, property, receiver) {
    console.log(`有人要访问 ${property} 属性了！`);
    return Reflect.get(target, property, receiver); // 原封不动地返回属性值
  },
  set(target, property, value, receiver) {
    console.log(`有人要修改 ${property} 属性了，新值是 ${value}！`);
    Reflect.set(target, property, value, receiver); // 修改属性值
    return true; // 表示修改成功
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name);  // 输出：有人要访问 name 属性了！  张三
proxy.age = 20;  // 输出：有人要修改 age 属性了，新值是 20！
console.log(target.age); // 输出：20

代码解释：

target：这是你要代理的原始对象，也就是你想让 Proxy 监控的对象。
handler：这是一个对象，包含了各种拦截方法，比如 get（拦截读取属性操作）和 set（拦截设置属性操作）。
new Proxy(target, handler)：创建一个 Proxy 实例，将 target 对象和 handler 对象关联起来。

现在，任何对 proxy 对象的访问和修改都会被 handler 中的方法拦截。

重点：handler 中常用的拦截器

handler 对象里可以定义很多拦截器，Vue 3 响应式系统主要用到了以下几个：

拦截器	拦截的操作	用途
`get(target, property, receiver)`	读取属性	在读取属性时进行依赖收集，也就是告诉 Vue 哪些地方用到了这个属性，方便数据变化时通知它们更新。
`set(target, property, value, receiver)`	设置属性	在设置属性时触发更新，通知所有依赖这个属性的地方进行重新渲染。
`has(target, property)`	`in` 操作符	拦截 `property in object` 操作，可以用来隐藏一些属性。
`deleteProperty(target, property)`	`delete` 操作符	拦截 `delete object.property` 操作，可以用来阻止删除某些属性。
`ownKeys(target)`	`Object.getOwnPropertyNames()` 等方法	拦截获取对象自身属性的操作，可以用来隐藏一些属性。

第二幕：Reflect——“原汁原味”的操作

你可能会问：在 handler 里的 get 和 set 方法中，我们都用到了 Reflect，这是个啥玩意？

Reflect 是一个内置对象，它提供了一系列静态方法，这些方法和 Object 对象上的方法很像，但有一些重要的区别。

统一的 API： Reflect 的方法和 Proxy 的 handler 中的拦截器一一对应，方便我们操作对象。
更好的错误处理： 以前，如果 Object 上的方法执行失败，可能会抛出错误，也可能只是默默地返回 false。而 Reflect 的方法如果执行失败，一定会抛出错误，让我们更容易发现问题。
更清晰的 this 指向： 在某些情况下，使用 Object 上的方法可能会导致 this 指向出现问题。而 Reflect 的方法可以保证 this 指向正确。

Reflect 的基本语法如下：

const obj = {
  name: '李四',
  age: 25
};

// 使用 Reflect.get 获取属性值
const name = Reflect.get(obj, 'name');
console.log(name); // 输出：李四

// 使用 Reflect.set 设置属性值
Reflect.set(obj, 'age', 30);
console.log(obj.age); // 输出：30

// 使用 Reflect.has 判断属性是否存在
const hasName = Reflect.has(obj, 'name');
console.log(hasName); // 输出：true

重点：Reflect 的重要性

在 Proxy 的 handler 中，我们通常使用 Reflect 的方法来执行原始的操作。这是因为：

保证原始行为： 使用 Reflect 可以确保我们对对象的操作和直接操作对象的效果是一样的，不会改变对象的原始行为。
避免无限循环： 如果我们在 handler 中直接使用 target[property] 来读取或设置属性，可能会导致无限循环调用 get 或 set 拦截器。使用 Reflect 可以避免这种情况。

第三幕：Proxy + Reflect = 响应式

现在，我们把 Proxy 和 Reflect 结合起来，看看 Vue 3 是如何实现响应式数据的。

以下是一个简化的响应式系统实现：

// 存储依赖的函数
let activeEffect = null;

// 依赖收集函数
function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，触发依赖收集
  activeEffect = null;
}

// 创建响应式对象
function reactive(target) {
  const handler = {
    get(target, property, receiver) {
      // 依赖收集
      track(target, property);
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      Reflect.set(target, property, value, receiver);
      // 触发更新
      trigger(target, property);
      return true;
    }
  };
  return new Proxy(target, handler);
}

// 存储依赖关系的 WeakMap
const targetMap = new WeakMap();

// 收集依赖
function track(target, property) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let deps = depsMap.get(property);
    if (!deps) {
      deps = new Set();
      depsMap.set(property, deps);
    }

    deps.add(activeEffect);
  }
}

// 触发更新
function trigger(target, property) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  const deps = depsMap.get(property);
  if (deps) {
    deps.forEach(effect => {
      effect(); // 执行依赖函数
    });
  }
}

// 示例
const data = {
  name: '王五',
  age: 35
};

const state = reactive(data);

effect(() => {
  console.log(`姓名：${state.name}，年龄：${state.age}`);
});

state.name = '赵六'; // 输出：姓名：赵六，年龄：35
state.age = 40; // 输出：姓名：赵六，年龄：40

代码解释：

effect 函数：
- 这个函数接收一个函数 fn 作为参数，fn 里面会访问响应式数据。
- effect 函数的作用是：
  - 将 fn 设置为当前激活的 effect (activeEffect = fn)。
  - 立即执行 fn，这样在 fn 里面访问响应式数据的时候，就可以触发 get 拦截器，从而进行依赖收集。
  - 将 activeEffect 设置为 null，表示当前没有激活的 effect。
reactive 函数：
- 这个函数接收一个普通对象 target 作为参数，并返回一个响应式代理对象。
- 在 get 拦截器中，调用 track 函数进行依赖收集。
- 在 set 拦截器中，调用 trigger 函数触发更新。
track 函数：
- 这个函数接收 target 对象和 property 属性作为参数。
- 它的作用是：将当前激活的 effect (activeEffect) 收集到 target 对象的 property 属性的依赖集合中。
- targetMap 是一个 WeakMap，用于存储 target 对象和它的依赖关系。
- depsMap 是一个 Map，用于存储 property 属性和它的依赖集合。
- deps 是一个 Set，用于存储依赖函数（effect）。
trigger 函数：
- 这个函数接收 target 对象和 property 属性作为参数。
- 它的作用是：从 target 对象的 property 属性的依赖集合中取出所有依赖函数（effect），并执行它们，从而触发更新。

重点：响应式流程

依赖收集： 当你访问响应式对象的属性时（例如 state.name），Proxy 的 get 拦截器会被触发。get 拦截器会调用 track 函数，将当前激活的 effect 函数（也就是访问该属性的函数）添加到该属性的依赖集合中。
触发更新： 当你修改响应式对象的属性时（例如 state.name = '赵六'），Proxy 的 set 拦截器会被触发。set 拦截器会调用 trigger 函数，取出该属性的依赖集合中的所有 effect 函数，并执行它们，从而触发更新。

第四幕：Vue 3 的优化

Vue 3 在响应式系统的实现上做了一些优化：

Lazy Tracking (延迟追踪): Vue 3 只会在组件首次渲染时进行依赖追踪，之后只有在数据发生变化时才会重新追踪，避免了不必要的性能开销。
Static Tree Hoisting (静态树提升): Vue 3 会将静态节点提升到渲染函数外部，避免每次渲染都重新创建这些节点。
Patching Flag (补丁标志): Vue 3 会为每个节点添加补丁标志，指示该节点需要更新的部分，从而实现更精确的更新。

总结：

Proxy 和 Reflect 是 Vue 3 响应式系统的核心。Proxy 负责拦截对数据的操作，Reflect 负责执行原始的操作。通过 Proxy 和 Reflect 的结合，Vue 3 能够实现高效的依赖收集和更新触发，从而实现响应式数据。

彩蛋：

Proxy 虽好，但也有一些缺点：

兼容性： Proxy 是 ES6 的新特性，在一些老旧的浏览器上可能不支持。
性能： Proxy 的拦截操作会带来一定的性能开销，虽然 Vue 3 已经做了很多优化，但在一些极端情况下，性能仍然可能受到影响。

但是，总的来说，Proxy 带来的好处远远大于它的缺点。它让 Vue 3 的响应式系统更加强大、灵活和高效。

好了，今天的讲座就到这里。希望大家能够对 Vue 3 的响应式系统有更深入的了解。下次再见！

发表回复 取消回复

发表回复取消回复