JS `Proxy` 实现数据响应式系统 (如 Vue 3.x 响应式原理)

各位靓仔靓女，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊JS Proxy 如何实现数据响应式系统，就像Vue 3.x那样。别担心，我会尽量用大白话，外加一些段子，让大家轻松愉快地掌握这个知识点。

开场白：响应式，你追我赶的游戏

话说，前端的世界就像一场你追我赶的游戏，各种框架层出不穷，但万变不离其宗，数据响应式就是这场游戏中的核心引擎之一。想想看，当你修改一个数据，页面上的相关元素就能自动更新，这感觉是不是很爽？这就是响应式的魅力！

Vue 3.x 放弃了 Vue 2.x 的 Object.defineProperty，转而拥抱了 Proxy，这是为什么呢？Proxy 到底有什么魔力，能让Vue 3.x的数据响应式系统更加强大？

第一幕：主角登场——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：这是我们要代理的目标对象，也就是被“监视”的对象。
• handler：这是处理器对象，它定义了对目标对象各种操作的拦截行为。
  • get(target, property, receiver)：拦截读取属性的操作。
    • target：目标对象。
    • property：要读取的属性名。
    • receiver：代理对象本身（通常用不到）。
    • Reflect.get(target, property, receiver)：这行代码非常重要，它会将读取操作转发给目标对象，否则就无法真正读取到属性值了。
  • set(target, property, value, receiver)：拦截设置属性的操作。
    • target：目标对象。
    • property：要设置的属性名。
    • value：要设置的属性值。
    • receiver：代理对象本身。
    • Reflect.set(target, property, value, receiver)：同样，这行代码会将设置操作转发给目标对象，否则就无法真正修改属性值了。
    • return true;：必须返回 true，表示设置成功，否则会报错。
• proxy：这是创建出来的代理对象，我们对它的操作都会被 handler 拦截。

Reflect 是什么鬼？

Reflect 是 ES6 引入的一个内置对象，它提供了一组与 Object 对象操作相对应的方法。简单来说，它可以让你更方便地操作对象，并且更加规范。

为什么不用 target[property] 而用 Reflect.get/set？

使用 Reflect 的好处是：

1. 更加清晰和规范： Reflect 提供的方法更明确地表达了意图，比如 Reflect.get 就是用来读取属性的，Reflect.set 就是用来设置属性的。
2. 避免隐式错误： 某些情况下，使用 target[property] 可能会导致一些隐式错误，而 Reflect 可以更好地处理这些情况。例如，如果 target 没有某个属性，target[property] 可能会返回 undefined，而 Reflect.get 会抛出一个 TypeError 错误，让你更容易发现问题。
3. 方便扩展： Reflect 对象的设计更易于扩展，可以方便地添加新的方法。

第二幕：响应式系统的核心思想

响应式系统的核心思想是：当数据发生变化时，自动更新视图。

要实现这个目标，我们需要做两件事：

1. 数据劫持： 能够“监视”数据的变化。
2. 依赖收集： 知道哪些视图依赖于这些数据。

Proxy 正是实现数据劫持的利器！我们可以利用 Proxy 拦截对数据的读取和修改操作，并在这些操作发生时，通知相关的视图进行更新。

第三幕：打造简易版响应式系统

现在，让我们用 Proxy 来打造一个简易版的响应式系统。

1. 定义一个 reactive 函数，用于将普通对象转换为响应式对象：

let activeEffect = null; // 当前激活的 effect 函数

// effect 函数，用于注册依赖
function effect(fn) {
  activeEffect = fn; // 将当前 effect 函数设置为激活状态
  fn(); // 立即执行一次，触发依赖收集
  activeEffect = null; // 执行完毕后，重置为 null
}

function reactive(target) {
  const handler = {
    get(target, property, receiver) {
      track(target, property); // 收集依赖
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      const result = Reflect.set(target, property, value, receiver);
      trigger(target, property); // 触发更新
      return result;
    }
  };
  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); // 将当前的 effect 函数添加到依赖集合中
  }
}

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

  const deps = depsMap.get(property);
  if (deps) {
    deps.forEach(effect => {
      effect(); // 执行依赖集合中的所有 effect 函数
    });
  }
}

2. 使用示例：

const data = {
  name: '李四',
  age: 22
};

const reactiveData = reactive(data); // 将 data 对象转换为响应式对象

effect(() => {
  console.log(`姓名：${reactiveData.name}，年龄：${reactiveData.age}`); // 注册依赖
});

reactiveData.name = '王五'; // 修改响应式数据，触发更新
reactiveData.age = 25; // 修改响应式数据，触发更新

代码解读：

• reactive(target)：这个函数接受一个普通对象作为参数，并返回一个代理对象。
• handler.get：在读取属性时，调用 track(target, property) 函数来收集依赖。
• handler.set：在设置属性时，调用 trigger(target, property) 函数来触发更新。
• targetMap：这是一个 WeakMap，用于存储依赖关系。
  • key：目标对象。
  • value：一个 Map，用于存储该目标对象的所有属性的依赖关系。
    • key：属性名。
    • value：一个 Set，用于存储依赖于该属性的所有 effect 函数。
• track(target, property)：这个函数用于收集依赖。它会将当前激活的 effect 函数添加到 targetMap 中对应目标对象和属性的依赖集合中。
• trigger(target, property)：这个函数用于触发更新。它会从 targetMap 中获取对应目标对象和属性的依赖集合，并执行集合中的所有 effect 函数。
• effect(fn)：注册副作用函数，当响应式数据发生变化时，这个函数会被执行。
• activeEffect：全局变量，用于存储当前激活的 effect 函数。

运行结果：

姓名：李四，年龄：22  // 初始输出
姓名：王五，年龄：22  // name 属性修改后输出
姓名：王五，年龄：25  // age 属性修改后输出

第四幕：Proxy 的优势

相比于 Vue 2.x 使用的 Object.defineProperty，Proxy 有以下优势：

特性	Object.defineProperty	Proxy
监听对象	只能监听属性	可以监听整个对象
监听数组	需要特殊处理	直接支持
新增/删除属性监听	需要特殊处理	直接支持
性能	某些情况下可能更好	性能更好
兼容性	兼容性更好	兼容性较差

• 监听对象： Proxy 可以监听整个对象，而 Object.defineProperty 只能监听对象的属性。这意味着 Proxy 可以更方便地实现对对象整体的监听，比如新增属性、删除属性等操作。
• 监听数组： Object.defineProperty 监听数组需要特殊处理，因为直接修改数组的 length 属性无法触发更新。而 Proxy 可以直接监听数组的各种操作，包括修改 length 属性、使用 push、pop 等方法。
• 新增/删除属性监听： Object.defineProperty 无法直接监听新增或删除属性的操作，需要使用 $set 和 $delete 等方法来手动触发更新。而 Proxy 可以直接监听这些操作，更加方便。
• 性能： 在某些情况下，Proxy 的性能可能更好，因为它不需要像 Object.defineProperty 那样遍历对象的所有属性。
• 兼容性： Object.defineProperty 的兼容性更好，可以支持到 IE8，而 Proxy 的兼容性较差，只能支持到 IE11+。

总结：

Proxy 提供了更强大的数据劫持能力，使得 Vue 3.x 的响应式系统更加灵活、高效。虽然 Proxy 的兼容性不如 Object.defineProperty，但随着浏览器版本的不断更新，Proxy 的兼容性也会越来越好。

第五幕：进阶之路

上面的代码只是一个简易版的响应式系统，实际的 Vue 3.x 响应式系统要复杂得多。例如，它还考虑了以下问题：

• 嵌套对象的处理： 如果对象中包含嵌套对象，需要递归地将所有嵌套对象都转换为响应式对象。
• 数组的处理： 数组的响应式处理需要特殊考虑，因为直接修改数组的 length 属性无法触发更新。
• 计算属性： 计算属性的值是基于其他响应式数据计算得出的，当依赖的响应式数据发生变化时，计算属性的值也需要自动更新。
• 只读属性： 某些属性可能只需要读取，不允许修改，需要对这些属性进行特殊处理。
• 避免无限循环： 在 get 和 set 拦截器中，需要避免无限循环调用。

如果你想深入了解 Vue 3.x 的响应式原理，可以参考 Vue 3.x 的源代码，或者阅读相关的技术文章。

结束语：响应式，永无止境的探索

好了，今天的分享就到这里。希望大家通过今天的学习，对 Proxy 实现数据响应式系统有了更深入的了解。响应式系统是一个复杂而有趣的领域，希望大家在未来的学习和工作中，不断探索，不断进步！

记住，编程的世界没有终点，只有不断学习和实践，才能成为真正的技术大牛！ 感谢大家！