深入剖析 Vue 3 响应式系统中 `Proxy` 的工作原理，结合 `track` 和 `trigger` 函数的源码，解释其如何实现更全面、更高效的依赖追踪和变化通知。

各位老铁，晚上好！今天咱不聊妹子，也不聊币，咱来聊聊 Vue 3 响应式系统里的大佬—— Proxy。这玩意儿可是 Vue 3 性能飞升的关键，搞懂它，你也能在面试和工作中秀一把操作。

咱今天就深入剖析 Proxy 的工作原理，结合 track 和 trigger 函数的源码，看看它如何实现更全面、更高效的依赖追踪和变化通知。准备好了吗？系好安全带，发车啦！

一、啥是响应式？为啥需要 Proxy？

首先，得搞清楚啥叫响应式？简单来说，就是数据变了，UI 自动跟着变。就像你炒股软件里的数字，股价一动，你的资产立马跟着跳。

在 Vue 2 时代，我们用 Object.defineProperty 来实现响应式。但这玩意儿有两个致命缺点：

只能监听已存在的属性：新增或删除属性，就得手动 Vue.set 或 Vue.delete，麻烦得一匹。
无法监听数组的索引和 length 变化：数组操作，比如 push、pop、splice 等，需要手动 hack，性能也堪忧。

Vue 3 痛定思痛，引入了 Proxy。这玩意儿就像一个代理人，你访问对象的任何属性，都会经过它。这样，它就能监听到所有属性的访问和修改，包括新增、删除属性，以及数组的变化，完美解决了 Vue 2 的痛点。

二、Proxy 的基本用法

Proxy 是 ES6 提供的一个构造函数，用于创建一个对象的代理。它接收两个参数：

target: 要代理的目标对象。
handler: 一个对象，包含一些方法（trap），用于拦截对目标对象的操作。

看个简单的例子：

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

const handler = {
  get(target, property, receiver) {
    console.log(`Getting property "${property}"`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`Setting property "${property}" to "${value}"`);
    return Reflect.set(target, property, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：Getting property "name"  张三
proxy.age = 20;          // 输出：Setting property "age" to "20"
console.log(proxy.age); // 输出：Getting property "age"  20

在这个例子中，我们创建了一个 Proxy 代理了 target 对象。当我们访问 proxy.name 或修改 proxy.age 时，都会触发 handler 中的 get 和 set 方法，从而实现拦截和监听。

handler 中常用的 trap 方法：

方法名	描述
`get`	拦截对目标对象属性的读取操作。
`set`	拦截对目标对象属性的设置操作。
`has`	拦截 `in` 操作符。
`deleteProperty`	拦截 `delete` 操作符。
`ownKeys`	拦截 `Object.getOwnPropertyNames()` 和 `Object.getOwnPropertySymbols()`，返回目标对象所有自身属性的键名数组。
`getOwnPropertyDescriptor`	拦截 `Object.getOwnPropertyDescriptor()`，返回目标对象指定属性的属性描述符。
`defineProperty`	拦截 `Object.defineProperty()`，用于定义或修改目标对象属性。
`preventExtensions`	拦截 `Object.preventExtensions()`，阻止目标对象扩展。
`getPrototypeOf`	拦截 `Object.getPrototypeOf()`，返回目标对象的原型。
`setPrototypeOf`	拦截 `Object.setPrototypeOf()`，设置目标对象的原型。
`apply`	拦截函数调用，当目标对象是函数时才有效。
`construct`	拦截 `new` 操作符，当目标对象是构造函数时才有效。

三、Vue 3 响应式系统的核心：reactive、track 和 trigger

Vue 3 响应式系统的核心函数是 reactive，它用于将一个普通对象转换成响应式对象。reactive 内部就是使用 Proxy 来实现的。

// 简化的 reactive 函数
function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 不是对象或 null，直接返回
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key);
      }
      return result;
    }
  });

  return proxy;
}

可以看到，reactive 函数创建了一个 Proxy，并在 get 和 set 方法中分别调用了 track 和 trigger 函数。这两个函数是响应式系统的灵魂。

1. track 函数：依赖收集

track 函数的作用是收集依赖，也就是记录哪些地方用到了这个响应式对象的属性。当属性发生变化时，我们才能知道需要通知哪些地方更新。

// 简化的 track 函数
const targetMap = new WeakMap(); // 存储 target -> key -> dep 的映射关系
let activeEffect = null; // 当前激活的 effect

function track(target, key) {
  if (!activeEffect) {
    return; // 没有激活的 effect，说明不在响应式上下文中
  }

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

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

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep); // 方便 cleanup
  }
}

// effect 函数，用于创建响应式副作用
function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn); // 清理之前的依赖
    activeEffect = effectFn;
    fn(); // 执行副作用函数，触发依赖收集
    activeEffect = null;
  };

  effectFn.deps = []; // 存储依赖的 dep 集合
  effectFn(); // 立即执行一次
}

// cleanup 函数，用于清理 effect 的依赖
function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep = effectFn.deps[i];
    dep.delete(effectFn);
  }
  effectFn.deps.length = 0;
}

track 函数的逻辑：

targetMap: 一个 WeakMap，用于存储 target -> key -> dep 的映射关系。target 是响应式对象，key 是属性名，dep 是一个 Set，存储了依赖这个属性的所有 effect 函数。
activeEffect: 当前激活的 effect 函数。只有在 effect 函数执行期间，activeEffect 才有值。
effect 函数: 用于创建响应式副作用，它会执行传入的函数 fn，并在这个过程中触发依赖收集。effect 函数还会立即执行一次 fn，确保初始状态也能被追踪。
cleanup 函数: 用于清理 effect 函数之前的依赖，避免重复触发。

举个例子：

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

effect(() => {
  console.log('count:', state.count);
});

state.count++; // 输出：count: 1
state.count++; // 输出：count: 2

在这个例子中，当我们调用 effect 函数时，会执行 console.log('count:', state.count)，这会触发 state.count 的 get 拦截器，进而调用 track(state, 'count')。track 函数会将当前的 effect 函数 (effectFn) 添加到 targetMap 中 state 对象的 count 属性的 dep 集合中。

当 state.count 的值发生变化时，trigger 函数会找到 state 对象的 count 属性的 dep 集合，并执行其中的所有 effect 函数，从而触发 UI 更新。

2. trigger 函数：触发更新

trigger 函数的作用是触发更新，也就是通知所有依赖这个响应式对象属性的地方进行更新。

// 简化的 trigger 函数
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return; // 没有依赖，直接返回
  }

  const dep = depsMap.get(key);
  if (!dep) {
    return; // 没有依赖这个属性，直接返回
  }

  // 创建一个新的 Set，避免在迭代过程中修改 Set
  const effectsToRun = new Set(dep);
  effectsToRun.forEach(effectFn => {
    effectFn(); // 执行 effect 函数
  });
}

trigger 函数的逻辑：

从 targetMap 中找到 target 对象的 depsMap。
从 depsMap 中找到 key 属性对应的 dep 集合。
遍历 dep 集合，执行其中的所有 effect 函数。

四、Proxy 的优势

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

更全面的监听：可以监听所有属性的访问和修改，包括新增、删除属性，以及数组的变化。
更高效的性能：避免了手动 Vue.set 和 Vue.delete，以及 hack 数组操作带来的性能问题。
更简洁的代码：简化了响应式系统的实现，代码更易于维护。

五、总结

Vue 3 的响应式系统基于 Proxy 实现，通过 track 和 trigger 函数进行依赖收集和触发更新。Proxy 提供了更全面的监听能力，以及更高效的性能，是 Vue 3 性能飞升的关键。

六、代码示例

为了方便大家理解，这里提供一个完整的代码示例，包含 reactive、track、trigger 和 effect 函数的实现：

const targetMap = new WeakMap();
let activeEffect = null;

function track(target, key) {
  if (!activeEffect) {
    return;
  }

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

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

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  const dep = depsMap.get(key);
  if (!dep) {
    return;
  }

  const effectsToRun = new Set(dep);
  effectsToRun.forEach(effectFn => {
    effectFn();
  });
}

function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn);
    activeEffect = effectFn;
    fn();
    activeEffect = null;
  };

  effectFn.deps = [];
  effectFn();
}

function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep = effectFn.deps[i];
    dep.delete(effectFn);
  }
  effectFn.deps.length = 0;
}

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    }
  });

  return proxy;
}

// 测试
const state = reactive({ count: 0, name: '张三' });

effect(() => {
  console.log('count:', state.count);
});

effect(() => {
  console.log('name:', state.name);
});

state.count++; // 输出：count: 1
state.name = '李四'; // 输出：name: 李四

七、进阶思考

shallowReactive 和 readonly: Vue 3 还提供了 shallowReactive 和 readonly 函数，分别用于创建浅响应式对象和只读对象。它们是如何实现的？
computed 和 watch: computed 和 watch 也是基于响应式系统实现的。它们是如何利用 track 和 trigger 函数的？
性能优化: 在实际项目中，如何优化响应式系统的性能？例如，避免不必要的依赖收集和触发更新。

今天就先聊到这里，希望大家对 Vue 3 的响应式系统有了更深入的理解。下次有机会再和大家分享更多 Vue 3 的干货！散会！

发表回复 取消回复

发表回复取消回复