Vue 3 Reactivity 的源码级拆解：不只是 Proxy

引言

Vue 3 的响应式系统是其核心特性之一，它让我们能够轻松构建交互式的用户界面。在现代前端开发中，响应式编程已成为构建复杂应用的重要范式，而Vue 3通过精心设计的响应式系统大大简化了这一过程。在这篇文章中，我们将深入探讨Vue 3响应式系统的内部工作机制，超越表面的Proxy介绍，深入到源码层面的实现细节。

响应式系统的基础概念

响应式编程的核心思想是：当数据变化时，依赖于该数据的计算或副作用应自动更新。Vue 3通过精心设计的API和内部机制实现了这一点。

从Vue 2到Vue 3：响应式系统的演进

Vue 2使用Object.defineProperty来实现响应式，而Vue 3则转向使用ES6的Proxy。这一变化带来了诸多优势：

• 能够检测对象属性的添加和删除
• 能够直接监听数组的变化
• 更好的性能表现（避免了初始化时的完全遍历）
• 更少的边缘情况

// Vue 2的响应式实现（简化版）
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      // 触发更新
    }
  })
}

// Vue 3的响应式实现（简化版）
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      // 触发更新
      return result;
    }
  })
}

深入Vue 3核心API的内部机制

reactive()的内部实现

reactive()是Vue 3中创建响应式对象的主要API。它的内部实现包括：

1. 使用Proxy拦截对象的访问和修改
2. 维护一个WeakMap来存储原始对象到代理对象的映射
3. 处理各种边缘情况，如避免重复代理

// reactive内部实现的简化版
const rawToReactive = new WeakMap(); // 原始对象 -> 响应式对象
const reactiveToRaw = new WeakMap(); // 响应式对象 -> 原始对象

function reactive(target) {
  // 已经是响应式对象，直接返回
  if (reactiveToRaw.has(target)) {
    return target;
  }
  // 原始对象已经有对应的响应式对象，返回已存在的
  if (rawToReactive.has(target)) {
    return rawToReactive.get(target);
  }
  
  const proxy = new Proxy(target, handlers);
  rawToReactive.set(target, proxy);
  reactiveToRaw.set(proxy, target);
  
  return proxy;
}

ref()的工作原理

ref()是处理基本类型值的响应式API。由于JavaScript中的基本类型值是通过值传递而非引用传递的，因此不能使用Proxy直接代理。Vue 3通过将基本类型值包装在一个带有.value属性的对象中来解决这一问题：

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value');
      return value;
    },
    set value(newValue) {
      if (value === newValue) return;
      value = newValue;
      trigger(refObject, 'value');
    }
  };
  
  // 标记为ref对象
  Object.defineProperty(refObject, '__v_isRef', {
    value: true
  });
  
  return refObject;
}

computed()和依赖追踪

computed()创建一个基于其他响应式数据的计算属性。它内部使用了effect系统来追踪依赖，并实现了缓存机制避免不必要的重复计算：

function computed(getter) {
  // 缓存相关的状态变量
  let value;
  let dirty = true; // 标记是否需要重新计算
  
  // 创建一个effect来执行getter并更新result
  const runner = effect(getter, {
    lazy: true, // 懒执行
    scheduler: () => {
      if (!dirty) {
        dirty = true; // 当依赖变化时，标记为需要重新计算
        trigger(result, 'value'); // 触发计算属性本身的更新
      }
    }
  });
  
  const result = {
    get value() {
      if (dirty) {
        value = runner(); // 只在需要时计算值
        dirty = false; // 计算后标记为干净状态
      }
      track(result, 'value'); // 收集依赖于计算属性的effect
      return value;
    }
  };
  
  return result;
}

watchEffect的实现机制

watchEffect让我们能观察响应式状态变化并执行副作用函数：

function watchEffect(effect, options = {}) {
  // 创建一个响应式effect
  const runner = createReactiveEffect(effect, {
    scheduler: () => {
      // 根据选项决定何时重新执行effect
      if (options.flush === 'sync') {
        runner();
      } else if (options.flush === 'post') {
        // 在下一个tick执行
        Promise.resolve().then(runner);
      } else {
        // 默认'pre'，在组件更新前执行
        queuePreFlushCb(runner);
      }
    }
  });
  
  // 处理清理函数
  if (options.onTrack || options.onTrigger) {
    // 注册跟踪和触发钩子
    runner.options.onTrack = options.onTrack;
    runner.options.onTrigger = options.onTrigger;
  }
  
  // 立即执行一次收集依赖
  if (options.immediate !== false) {
    runner();
  }
  
  // 返回停止函数
  return () => {
    stop(runner);
    if (options.onStop) {
      options.onStop();
    }
  };
}

依赖收集(track)与触发更新(trigger)的具体流程

Vue 3的响应式系统核心在于依赖收集和触发更新的机制：

依赖收集(track)

当访问一个响应式对象的属性时，系统会记录当前正在执行的effect与该属性之间的依赖关系：

// 全局变量，存储当前正在执行的effect
let activeEffect;

// 依赖收集函数
function track(target, key) {
  if (!activeEffect) return;
  
  // 获取该目标对象的所有依赖Map
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  
  // 获取该属性的所有依赖Set
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  
  // 添加当前effect作为依赖
  dep.add(activeEffect);
  
  // 同时记录该effect依赖了哪些属性（用于清理）
  activeEffect.deps.push(dep);
}

这里的数据结构是三层嵌套：

1. WeakMap: target -> Map
2. Map: key -> Set
3. Set: 存储依赖该属性的effects

触发更新(trigger)

当修改一个响应式对象的属性时，系统会查找依赖于该属性的所有effects并执行：

function trigger(target, key) {
  // 获取该目标对象的依赖Map
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  
  // 创建一个新的Set来收集要运行的effect
  const effects = new Set();
  
  // 辅助函数: 将依赖添加到effects集合中
  const add = (effectsToAdd) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        // 避免当前正在运行的effect触发自身
        if (effect !== activeEffect) {
          effects.add(effect);
        }
      });
    }
  };
  
  // 处理特定key的依赖
  if (key !== void 0) {
    add(depsMap.get(key));
  }
  
  // 处理数组特殊操作如length变化
  if (Array.isArray(target) && key === 'length') {
    depsMap.forEach((dep, depKey) => {
      if (depKey === 'length' || depKey >= target.length) {
        add(dep);
      }
    });
  }
  
  // 执行所有effects
  effects.forEach(effect => {
    // 如果有调度器，使用调度器执行
    if (effect.options.scheduler) {
      effect.options.scheduler(effect);
    } else {
      // 否则直接执行
      effect();
    }
  });
}

构建简易响应式系统

为了更好地理解Vue 3的响应式系统，我们可以实现一个简化版的响应式系统：

// 存储依赖关系的WeakMap
const targetMap = new WeakMap();
// 当前活跃的effect
let activeEffect = null;

// 创建响应式对象
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      const result = Reflect.get(target, key, receiver);
      // 如果属性值是对象，递归使其响应式
      return typeof result === 'object' && result !== null 
        ? reactive(result) 
        : result;
    },
    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;
    },
    deleteProperty(target, key) {
      const hadKey = key in target;
      const result = Reflect.deleteProperty(target, key);
      // 只有删除成功且对象确实有该属性时才触发更新
      if (hadKey && result) {
        trigger(target, key);
      }
      return result;
    }
  });
}

// 创建ref
function ref(value) {
  const refObj = {
    get value() {
      track(refObj, 'value');
      return value;
    },
    set value(newValue) {
      if (value === newValue) return;
      value = newValue;
      trigger(refObj, 'value');
    }
  };
  
  // 标记为ref对象
  Object.defineProperty(refObj, '__v_isRef', {
    value: true
  });
  
  return refObj;
}

// 创建effect
function effect(fn, options = {}) {
  const effectFn = () => {
    try {
      activeEffect = effectFn;
      // 清理旧的依赖
      cleanup(effectFn);
      // 执行函数，触发依赖收集
      return fn();
    } finally {
      activeEffect = null;
    }
  };
  
  // 存储effect的额外信息
  effectFn.options = options;
  effectFn.deps = [];
  
  // 如果不是懒执行，立即执行一次
  if (!options.lazy) {
    effectFn();
  }
  
  return effectFn;
}

// 清理effect的依赖
function cleanup(effect) {
  const { deps } = effect;
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect);
    }
    deps.length = 0;
  }
}

// 依赖收集
function track(target, key) {
  if (!activeEffect) return;
  
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  
  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;
  
  [...dep].forEach(effect => {
    if (effect.options.scheduler) {
      effect.options.scheduler(effect);
    } else {
      effect();
    }
  });
}

// 计算属性
function computed(getter) {
  let value;
  let dirty = true;
  
  const runner = effect(getter, {
    lazy: true,
    scheduler: () => {
      if (!dirty) {
        dirty = true;
        trigger(cRef, 'value');
      }
    }
  });
  
  const cRef = {
    get value() {
      if (dirty) {
        value = runner();
        dirty = false;
      }
      track(cRef, 'value');
      return value;
    }
  };
  
  return cRef;
}

特殊API：逃脱响应式系统的控制

Vue 3提供了一系列API来控制响应式行为，让开发者可以更精细地调整系统表现：

markRaw：永久标记对象为非响应式

有时候我们不希望某些大型对象被转换为响应式，例如第三方库的复杂实例或大量数据：

function markRaw(target) {
  Object.defineProperty(target, '__v_skip', {
    value: true,
    enumerable: false
  });
  return target;
}

// 使用示例
const thirdPartyLibInstance = markRaw(new ThirdPartyClass());
const state = reactive({
  // 即使在reactive对象内部，也不会被转换为响应式
  instance: thirdPartyLibInstance
});

shallowReactive：只代理对象最外层属性

当我们只需要监听对象最表层属性的变化时，可以使用shallowReactive来避免深层代理带来的性能损耗：

function shallowReactive(target) {
  // 创建一个handlers的浅层版本
  const shallowHandlers = {
    get(target, key, receiver) {
      track(target, key);
      // 直接返回原始值，不递归处理
      return Reflect.get(target, key, receiver);
    },
    // 其他handlers类似reactive但不做递归处理
  };
  
  return new Proxy(target, shallowHandlers);
}

// 使用示例
const state = shallowReactive({
  user: { name: 'John', address: { city: 'New York' } }
});
// state.user的改变是响应式的
// 但state.user.name或state.user.address.city的改变不会触发更新

shallowRef：只处理.value属性的赋值

类似地，shallowRef只对.value属性的直接赋值做响应式处理，不深入处理内部嵌套对象：

function shallowRef(value) {
  const refObject = {
    get value() {
      track(refObject, 'value');
      return value;
    },
    set value(newValue) {
      if (value === newValue) return;
      value = newValue;
      trigger(refObject, 'value');
    }
  };
  
  Object.defineProperty(refObject, '__v_isRef', { value: true });
  Object.defineProperty(refObject, '__v_isShallow', { value: true });
  
  return refObject;
}

响应式系统的性能优化

Vue 3的响应式系统在设计时十分注重性能，采用了多种优化策略：

惰性响应式转换

Vue 3不再像Vue 2那样在初始化时递归遍历所有属性设置getter/setter，而是采用了惰性代理模式：

// Vue 3的reactive实现中
get(target, key, receiver) {
  // ...依赖收集
  const res = Reflect.get(target, key, receiver)
  // 只有在实际访问嵌套对象时才将其转换为响应式
  return typeof res === 'object' && res !== null 
    ? reactive(res)  // 惰性创建
    : res
}

集合类型的优化

Vue 3对Map、Set、WeakMap和WeakSet等集合类型提供了专门优化的处理器：

// Map类型的特殊处理示例
function createInstrumentationForMap() {
  return {
    get(key) {
      const target = reactiveToRaw.get(this);
      const value = target.get(key);
      track(target, key); // 追踪依赖
      // 处理值的响应式转换...
      return value;
    },
    set(key, value) {
      const target = reactiveToRaw.get(this);
      const hadKey = target.has(key);
      const oldValue = target.get(key);
      target.set(key, value);
      // 根据是新增还是修改触发不同类型的更新
      if (!hadKey) {
        trigger(target, 'add', key);
      } else if (value !== oldValue) {
        trigger(target, 'set', key);
      }
    }
    // ...其他方法如delete, clear等
  };
}

实际开发中的最佳实践和常见陷阱

最佳实践

1. 避免大型不可变数据结构的响应式转换

// 不好的做法
const state = reactive({
  hugeData: largeReadOnlyDataset // 如果不需要变化追踪，无需响应式
});

// 好的做法
const state = reactive({});
// 使用markRaw或普通引用
state.hugeData = markRaw(largeReadOnlyDataset);

2. 使用toRefs将响应式对象转换为普通对象

// 在组件中返回响应式对象的属性
const userState = reactive({ name: 'Alice', age: 30 });

// 不解构直接使用
return { userState }; // 访问时需要userState.name

// 使用toRefs解构为refs
const { name, age } = toRefs(userState);
return { name, age }; // 可直接使用name.value

3. 使用shallowReactive/shallowRef处理大型数据结构

// 当你只关心对象的最外层属性变化时
const state = shallowReactive({
  profile: { /* 大量嵌套数据 */ },
  settings: { /* 大量嵌套数据 */ }
});

// 手动触发特定内部属性的更新
function updateNestedProperty() {
  state.profile.someDeepProperty = newValue;
  // 手动触发更新
  triggerRef(toRef(state, 'profile'));
}

常见陷阱

1. 响应式对象解构陷阱

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

// 错误 - 解构后失去响应性
const { count } = state;
count++; // 不会触发更新

// 正确 - 使用toRefs保持响应性
const { count } = toRefs(state);
count.value++; // 会触发更新

// 或使用computed
const count = computed(() => state.count);

2. 数组索引和length变更陷阱

const list = reactive([1, 2, 3]);

// 不会触发视图更新的操作
list[0] = 0; // Vue 3可以检测到，但Vue 2不行
list.length = 1; // Vue 3可以检测到，但Vue 2不行

// 总是有效的响应式数组操作
list.push(4);
list.pop();
list.splice(0, 1, 10);

3. 新增属性的响应式问题

const state = reactive({});

// 在Vue 3中直接添加可生效
state.newProp = 'value'; // 有响应性

// Vue 2中需要Vue.set
// Vue.set(state, 'newProp', 'value');

总结

Vue 3的响应式系统是一个精心设计的系统，它不仅仅是使用了Proxy这么简单。它包含了多层依赖追踪、智能的调度系统、以及各种优化。通过深入理解其工作原理，我们不仅能更好地使用Vue，还能将这些响应式编程的思想应用到更广泛的场景中。

Vue团队还在持续改进响应式系统，未来可能会带来更多优化，如增强的类型推断、更细粒度的控制API和更高效的实现方式。Vue的响应式系统设计理念甚至可能影响其他框架及未来前端开发的方向。

响应式编程是现代前端开发的重要范式，而Vue 3的响应式系统提供了一种优雅而强大的实现。希望这篇文章能帮助你深入理解Vue 3的响应式原理，并在实际开发中更好地应用这些知识。