Vue3 源码解析：响应式 baseHandler深入剖析

2024-02-11 15:17:58

在探讨 Vue3 响应式机制的奥秘之前，我们先来回顾一下 Proxy 的定义。Proxy 是一种 JavaScript 内置对象，它允许我们对 JavaScript 对象进行拦截并自定义行为，以实现数据劫持等功能。在 Vue3 的响应式系统中，Proxy 扮演着至关重要的角色，通过 baseHandler 处理器对象来对对象进行劫持，从而实现响应式数据。

baseHandler 处理器对象，是 Vue3 响应式系统中一个核心组件，它的存在是为了处理对象属性的访问和修改行为，并触发相应的更新操作。为了更好地理解 baseHandler 的作用，我们不妨来具体分析一下它的源码实现。

源码剖析

1. 属性访问拦截

当我们访问一个响应式对象的属性时，baseHandler 的 get 方法就会被触发，此时的逻辑如下：

get: function(target, key) {
  // 如果是 Symbol 属性，直接返回
  if (typeof key === 'symbol') {
    return target[key];
  }
  // 尝试从 effectMap 中获取依赖
  let effect = effectMap.get(target);
  // 如果 effect 存在，则将依赖添加到 effect 的依赖集合中
  if (effect !== undefined) {
    trackEffects(target, key, effect);
  }
  // 返回属性值
  return target[key];
}

从代码中可以看出，当访问一个属性时，首先会检查它是否是一个 Symbol 属性。如果是，则直接返回它的值。否则，它会尝试从 effectMap 中获取一个 effect，effectMap 是一个用来存储响应式对象及其依赖关系的映射表。

如果找到了 effect，则将其添加到 effect 的依赖集合中，从而建立起属性和 effect 之间的依赖关系。最后，它会返回属性的值。

2. 属性修改拦截

当我们修改一个响应式对象的属性时，baseHandler 的 set 方法就会被触发，此时的逻辑如下：

set: function(target, key, value) {
  // 如果是 Symbol 属性，直接设置值
  if (typeof key === 'symbol') {
    target[key] = value;
    return true;
  }
  // 触发依赖项的副作用函数
  triggerEffects(target, key);
  // 设置属性值
  target[key] = value;
  return true;
}