JS `Proxy` 实现响应式系统：Vue 3.x 响应式原理深度剖析

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊 Vue 3.x 响应式系统的幕后英雄：Proxy。

准备好了吗？咱们这就开车！

一、开胃小菜：响应式系统是啥玩意儿？

先问大家一个问题：啥是响应式？简单来说，就是当你的数据发生变化时，依赖于这些数据的视图（比如页面上的内容）能够自动更新，而你不需要手动去操作 DOM。

这就好比你订阅了某个新闻频道，一旦有新消息，电视会自动播放给你看，不用你天天手动刷新页面。

在前端开发中，响应式系统能大大简化我们的开发工作，提高用户体验。Vue.js 框架的核心竞争力之一就是其强大的响应式系统。

二、主角登场：Proxy 是个什么鬼？

在 Vue 3.x 中，响应式系统的核心就是 Proxy。那么，Proxy 到底是个什么东西呢？

Proxy 是 ES6 引入的一个新特性，它允许你创建一个代理对象，拦截对目标对象的各种操作，比如读取属性、设置属性、调用方法等等。你可以把它想象成一个“门卫”，所有对目标对象的访问都必须经过它。

举个例子，假设你有一个对象 person：

const person = {
  name: '张三',
  age: 18
};

现在，你想创建一个 Proxy 来监视对 person 的访问：

const proxyPerson = new Proxy(person, {
  get(target, property) {
    console.log(`有人要读取 ${property} 属性！`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`有人要设置 ${property} 属性为 ${value}！`);
    target[property] = value;
    return true; // 表示设置成功
  }
});

console.log(proxyPerson.name); // 输出：有人要读取 name 属性！ 张三
proxyPerson.age = 20; // 输出：有人要设置 age 属性为 20！
console.log(person.age); // 输出：20

在这个例子中，我们创建了一个 proxyPerson 对象，它代理了 person 对象。当我们读取 proxyPerson.name 时，get 拦截器会被触发，打印一条日志，然后返回 person.name 的值。当我们设置 proxyPerson.age 时，set 拦截器会被触发，打印一条日志，然后更新 person.age 的值。

三、Vue 3.x 如何利用 Proxy 实现响应式？

Vue 3.x 利用 Proxy 和 Reflect 这两个 API，实现了一套高效的响应式系统。

Proxy： 负责拦截对数据的访问和修改。
Reflect： 提供了一套与 Proxy 拦截器一一对应的方法，用于执行目标对象的默认行为。

用人话说，Proxy 负责“盯梢”，发现有人想访问或修改数据，就通知 Reflect 去执行真正的操作。

下面我们来模拟一下 Vue 3.x 响应式系统的核心代码：

// 存储依赖的函数
const targetMap = new WeakMap();

// 收集依赖
function track(target, key) {
  // 如果当前没有正在执行的 effect 函数，则直接返回
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

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

  deps.add(activeEffect);
}

// 触发依赖
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const deps = depsMap.get(key);
  if (!deps) return;

  deps.forEach(effect => {
    effect();
  });
}

// effect 函数，用于包装依赖
let activeEffect;
function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，收集依赖
  activeEffect = null;
}

// 创建响应式对象
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return true;
    }
  });
}

// 示例
const data = {
  name: '李四',
  age: 25
};

const state = reactive(data);

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

state.name = '王五'; // 输出：姓名：王五，年龄：25
state.age = 30; // 输出：姓名：王五，年龄：30

这段代码模拟了一个简单的响应式系统。

targetMap： 一个 WeakMap，用于存储目标对象及其对应的依赖关系。WeakMap 的键是对象，值是 Map，Map 的键是属性名，值是 Set，Set 中存储了依赖于该属性的 effect 函数。
track(target, key)： 用于收集依赖。当读取响应式对象的属性时，track 函数会被调用，它会将当前正在执行的 effect 函数添加到该属性的依赖列表中。
trigger(target, key)： 用于触发依赖。当设置响应式对象的属性时，trigger 函数会被调用，它会遍历该属性的依赖列表，依次执行其中的 effect 函数。
effect(fn)： 用于包装依赖。effect 函数接收一个函数 fn 作为参数，并将 fn 设置为当前正在执行的 effect 函数。然后，它会立即执行 fn 一次，以便收集依赖。最后，它会将 activeEffect 重置为 null。
reactive(target)： 用于创建响应式对象。reactive 函数接收一个对象 target 作为参数，并返回一个 Proxy 对象。Proxy 对象的 get 拦截器会调用 track 函数收集依赖，set 拦截器会调用 trigger 函数触发依赖。

在这个例子中，我们首先创建了一个原始对象 data，然后使用 reactive 函数将其转换为响应式对象 state。接着，我们使用 effect 函数创建了一个依赖于 state.name 和 state.age 的副作用函数。当 state.name 或 state.age 发生变化时，该副作用函数会被自动执行，从而更新控制台的输出。

四、Reflect 的妙用

在上面的代码中，我们使用了 Reflect.get 和 Reflect.set 这两个 API。它们的作用是执行目标对象的默认行为。

为什么要使用 Reflect 呢？

解决 this 指向问题： 在 Proxy 的拦截器中，this 指向的是 Proxy 对象，而不是目标对象。使用 Reflect 可以确保 this 指向目标对象。
提供更强大的元编程能力： Reflect 提供了一套与 Proxy 拦截器一一对应的方法，可以让我们更灵活地控制对象的行为。

如果没有 Reflect，我们需要手动调用目标对象的默认行为，这可能会导致一些问题。例如：

// 不使用 Reflect 的 set 拦截器
set(target, key, value) {
  target[key] = value;
  return true;
}

这段代码看起来没什么问题，但如果目标对象是一个使用 Object.defineProperty 定义了 setter 的对象，那么这段代码可能无法正确地触发 setter。而使用 Reflect.set 可以避免这个问题。

五、深层响应式：嵌套对象的处理

上面的代码只能处理浅层对象的响应式。如果对象中包含嵌套对象，那么嵌套对象的变化将无法被监听到。

为了实现深层响应式，我们需要递归地将所有嵌套对象都转换为响应式对象。

function reactive(target) {
  if (typeof target === 'object' && target !== null) {
    return new Proxy(target, {
      get(target, key, receiver) {
        track(target, key);
        const res = Reflect.get(target, key, receiver);
        // 如果 res 是对象，递归调用 reactive
        return typeof res === 'object' && res !== null ? reactive(res) : res;
      },
      set(target, key, value, receiver) {
        Reflect.set(target, key, value, receiver);
        trigger(target, key);
        return true;
      }
    });
  } else {
    // 不是对象，直接返回
    return target;
  }
}

// 示例
const data = {
  name: '李四',
  age: 25,
  address: {
    city: '北京',
    street: '长安街'
  }
};

const state = reactive(data);

effect(() => {
  console.log(`姓名：${state.name}，城市：${state.address.city}`);
});

state.address.city = '上海'; // 输出：姓名：李四，城市：上海

在这个例子中，我们在 get 拦截器中判断 res 是否是对象，如果是对象，则递归调用 reactive 函数将其转换为响应式对象。这样，我们就可以监听嵌套对象的变化了。

六、总结与展望

我们来总结一下今天的内容：

响应式系统是一种能够自动更新视图的数据绑定机制。
Proxy 是 ES6 引入的一个新特性，可以拦截对目标对象的各种操作。
Vue 3.x 使用 Proxy 和 Reflect 实现了一套高效的响应式系统。
Reflect 可以解决 this 指向问题，并提供更强大的元编程能力。
通过递归调用 reactive 函数，我们可以实现深层响应式。

特性	描述
`Proxy`	拦截对目标对象的各种操作，例如读取属性、设置属性、调用方法等。
`Reflect`	提供了一套与 `Proxy` 拦截器一一对应的方法，用于执行目标对象的默认行为。
响应式系统	一种能够自动更新视图的数据绑定机制，当数据发生变化时，依赖于这些数据的视图能够自动更新。
深层响应式	能够监听嵌套对象的变化的响应式系统。
`track`	用于收集依赖，当读取响应式对象的属性时，`track` 函数会被调用，它会将当前正在执行的 `effect` 函数添加到该属性的依赖列表中。
`trigger`	用于触发依赖，当设置响应式对象的属性时，`trigger` 函数会被调用，它会遍历该属性的依赖列表，依次执行其中的 `effect` 函数。
`effect`	用于包装依赖，`effect` 函数接收一个函数 `fn` 作为参数，并将 `fn` 设置为当前正在执行的 `effect` 函数。然后，它会立即执行 `fn` 一次，以便收集依赖。最后，它会将 `activeEffect` 重置为 `null`。
`reactive`	用于创建响应式对象，`reactive` 函数接收一个对象 `target` 作为参数，并返回一个 `Proxy` 对象。`Proxy` 对象的 `get` 拦截器会调用 `track` 函数收集依赖，`set` 拦截器会调用 `trigger` 函数触发依赖。

当然，Vue 3.x 的响应式系统远不止这些，还有很多细节和优化，比如：

readonly： 用于创建只读的响应式对象。
shallowReactive 和 shallowReadonly： 用于创建浅层的响应式对象和只读对象。
computed： 用于创建计算属性，它会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。
watch： 用于监听数据的变化，并在数据变化时执行回调函数。

这些内容我们以后有机会再深入探讨。

希望今天的分享能帮助大家更好地理解 Vue 3.x 的响应式系统。感谢大家的观看，咱们下期再见！

发表回复 取消回复

发表回复取消回复