阐述 Vue 3 源码中 `Reactive` 和 `Ref` 的内部实现差异，以及它们在内存使用和性能上的权衡。

好的，各位观众老爷们，今天咱们来聊聊 Vue 3 源码里两位核心人物——Reactive 和 Ref。 这俩兄弟长得挺像，都是响应式数据，但骨子里可是大相径庭。 今天就扒开他们的皮，看看内部实现，以及它们在内存和性能上的优劣。

开场白：响应式江湖风云录

话说在 Vue 3 的江湖里，响应式数据就是武林高手们的内力，驱动着整个应用的运转。 Reactive 和 Ref 就是这内功心法里的两门绝学，各有千秋，练好了都能让你在组件世界里横着走。

第一章：Reactive——化腐朽为神奇的代理术

首先登场的是 Reactive，这哥们的核心思想是“代理”。 啥叫代理呢？ 简单说，就是给你一个对象，但你操作的不是这个对象本身，而是它的替身——一个代理对象。 这个代理对象会监视你对原对象的所有操作，一旦有变化，立马通知 Vue 刷新界面。

1.1 Proxy 大法：响应式的根基

Reactive 的核心秘密武器就是 JavaScript 原生的 Proxy 对象。 Proxy 允许你拦截对象的操作，比如读取属性、设置属性、删除属性等等。 Vue 3 就是利用 Proxy，在这些操作发生时触发响应式更新。

// 简化的 Reactive 实现 (仅用于演示，非源码)
function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 只能代理对象
  }

  return 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 (value !== oldValue) {
        // 触发更新 (后面细讲)
        trigger(target, key);
      }
      return result;
    }
  });
}

// 示例
const data = { count: 0 };
const reactiveData = reactive(data);

reactiveData.count = 1; // 触发更新
console.log(reactiveData.count); // 收集依赖

这段代码简化了 reactive 的实现，主要展示了 Proxy 的用法。 get 方法负责收集依赖，set 方法负责触发更新。 track 和 trigger 是 Vue 内部的依赖追踪和触发机制，后面会详细解释。

1.2 依赖追踪：知道谁依赖了谁

Vue 需要知道哪些组件或计算属性依赖了某个响应式数据，这样当数据变化时，才能精确地更新相关的视图。 这个过程叫做“依赖追踪”。

Vue 使用一个全局的 activeEffect 变量来记录当前正在执行的副作用函数 (effect)。 副作用函数通常是组件的渲染函数或计算属性。

当你在 reactive 对象的 get 方法中访问属性时，Vue 会把当前的 activeEffect 和这个属性关联起来，记录下来。 这样就建立了依赖关系。

// 简化的依赖追踪实现 (仅用于演示，非源码)
let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，收集依赖
  activeEffect = null;
}

const targetMap = new WeakMap(); // 用于存储 target -> key -> effect 的映射

function track(target, key) {
  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(); // 执行副作用函数，触发更新
  });
}

// 示例
const data = { count: 0 };
const reactiveData = reactive(data);

effect(() => {
  console.log('count:', reactiveData.count); // 收集依赖
});

reactiveData.count = 1; // 触发更新，console.log 再次执行

这段代码展示了依赖追踪的核心机制。 effect 函数用于注册副作用函数，track 函数用于收集依赖，trigger 函数用于触发更新。 targetMap 是一个 WeakMap，用于存储 target -> key -> effect 的映射关系，方便查找和管理依赖。

1.3 优点与缺点：Reactive 的硬币两面

• 优点：
  • 深度响应式： 任何嵌套的属性变化都会被追踪到。
  • 使用简单： 直接操作对象属性，无需额外 API。
• 缺点：
  • 只能代理对象： 不能代理原始类型 (number, string, boolean 等)。
  • 性能开销： 代理对象需要额外的内存和计算开销。
  • 兼容性问题： Proxy 在老版本浏览器上不支持。

特性	说明
适用类型	对象 (包括数组、对象、Map、Set 等)
响应式深度	深度响应式，嵌套属性变化也能追踪
内存开销	相对较高，需要额外的 Proxy 对象
性能开销	相对较高，每次属性访问和修改都会触发 Proxy 的 get 和 set 拦截器
兼容性	需要浏览器支持 Proxy，老版本浏览器可能需要 Polyfill
使用方式	直接操作对象属性

第二章：Ref——原始类型的守护者

Ref 的定位就比较特殊了，它专门用来处理原始类型 (number, string, boolean 等) 的响应式。 因为 Proxy 只能代理对象，所以 Vue 团队设计了 Ref 来弥补这个缺陷。

2.1 RefImpl：内部的秘密

Ref 实际上是一个包含 .value 属性的对象。 你通过 .value 来访问和修改原始类型的值。

// 简化的 RefImpl 实现 (仅用于演示，非源码)
class RefImpl {
  constructor(value) {
    this._value = value;
  }

  get value() {
    // 收集依赖
    track(this, 'value');
    return this._value;
  }

  set value(newValue) {
    if (newValue !== this._value) {
      this._value = newValue;
      // 触发更新
      trigger(this, 'value');
    }
  }
}

function ref(value) {
  return new RefImpl(value);
}

// 示例
const count = ref(0);

effect(() => {
  console.log('count:', count.value); // 收集依赖
});

count.value = 1; // 触发更新，console.log 再次执行

这段代码展示了 RefImpl 的基本结构。 get value() 和 set value() 方法分别负责收集依赖和触发更新。 注意，这里 track 和 trigger 的 target 是 this (RefImpl 实例)，key 是 ‘value’。

2.2 unref：脱掉 Ref 的外衣

有时候你需要直接获取 Ref 内部的值，而不是通过 .value。 Vue 提供了 unref 函数来帮你脱掉 Ref 的外衣。

function unref(ref) {
  return isRef(ref) ? ref.value : ref;
}

function isRef(value) {
  return value instanceof RefImpl; // 简化的判断
}

// 示例
const count = ref(0);
console.log(unref(count)); // 0
console.log(unref(123));   // 123

unref 函数会判断传入的参数是否是 Ref 对象，如果是，则返回 .value，否则直接返回参数本身。

2.3 优点与缺点：Ref 的精打细算

• 优点：
  • 可以代理原始类型： 弥补了 Reactive 的不足。
  • 内存开销较小： 只需创建一个 RefImpl 实例。
• 缺点：
  • 使用略显繁琐： 需要通过 .value 访问和修改值。
  • 不是深度响应式： 如果 Ref 的 value 是一个对象，那么只有修改 .value 才会触发更新，修改对象内部的属性不会。

特性	说明
适用类型	原始类型 (number, string, boolean 等)，也可以是对象
响应式深度	浅层响应式，只有修改 .value 才会触发更新，如果 .value 是对象，修改对象内部属性不会触发更新
内存开销	相对较低，只需创建一个 RefImpl 对象
性能开销	相对较低，每次 .value 访问和修改都会触发 get 和 set 拦截器
兼容性	无兼容性问题
使用方式	通过 .value 访问和修改值

第三章：Reactive vs Ref：巅峰对决

现在，让我们把 Reactive 和 Ref 拉出来溜溜，看看它们在内存使用和性能上的权衡。

3.1 内存使用：精打细算还是挥金如土？

• Reactive： Reactive 需要创建一个 Proxy 对象来代理目标对象，这意味着额外的内存开销。 如果目标对象非常大，或者有很多嵌套的属性，那么 Proxy 对象的内存开销也会相应增加。
• Ref： Ref 只需要创建一个 RefImpl 实例，内存开销相对较小。 即使 Ref 的 value 是一个对象，也只是保存对象的引用，不会创建新的 Proxy 对象。

因此，在内存使用方面，Ref 更胜一筹。

3.2 性能：闪电战还是持久战？

• Reactive： Reactive 的性能开销主要体现在 Proxy 的 get 和 set 拦截器上。 每次访问或修改属性，都会触发这些拦截器，执行依赖追踪和触发更新的操作。 如果组件中频繁访问或修改响应式数据，那么 Reactive 的性能开销可能会比较明显。
• Ref： Ref 的性能开销也体现在 .value 的 get 和 set 方法上。 但由于 Ref 只代理一个 .value 属性，所以性能开销相对较小。

但是，Reactive 的深度响应式特性也意味着，当嵌套的属性发生变化时，Vue 可以精确地更新相关的视图，避免不必要的渲染。 而 Ref 的浅层响应式可能导致更多的组件重新渲染，反而影响性能。

因此，在性能方面，Reactive 和 Ref 各有优劣，需要根据具体的场景进行选择。

3.3 如何选择：因地制宜，量体裁衣

那么，在实际开发中，我们应该如何选择 Reactive 和 Ref 呢？

• 原始类型： 毫无疑问，选择 Ref。 这是 Ref 的专属领域。
• 对象：
  • 如果需要深度响应式，并且对象不会太大，可以选择 Reactive。
  • 如果只需要浅层响应式，或者对象非常大，可以选择 Ref。
  • 如果对象内部的属性都是原始类型，也可以考虑使用多个 Ref 来管理。

选择依据	推荐使用
数据类型	原始类型：Ref； 对象：根据是否需要深度响应式以及对象大小来决定
响应式深度需求	深度响应式：Reactive； 浅层响应式：Ref
对象大小	小对象：Reactive； 大对象：Ref
性能要求	对性能要求较高，且只需要浅层响应式：Ref； 对性能要求不高，需要深度响应式：Reactive
复杂数据结构	如果需要更细粒度的控制，可以考虑使用多个 Ref 来管理对象的各个属性。

第四章：源码剖析：深入 Vue 3 的心脏

理论讲完了，现在我们来深入 Vue 3 的源码，看看 Reactive 和 Ref 的真实面目。

4.1 Reactive 的源码实现

Vue 3 的 reactive 函数位于 packages/reactivity/src/reactive.ts 文件中。 它的核心逻辑如下：

function reactive(target: object): any {
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

// createReactiveObject 函数 (简化版)
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  if (!isObject(target)) {
    return target
  }
  if (
    targetMap.has(target)
  ) {
    return targetMap.get(target)
  }
  const proxy = new Proxy(
    target,
    targetType.has(target)
      ? collectionHandlers
      : baseHandlers
  )
  targetMap.set(target, proxy)
  return proxy
}

这段代码首先判断目标对象是否是只读的，如果是，则直接返回。 然后调用 createReactiveObject 函数来创建 Proxy 对象。 createReactiveObject 函数会先判断目标对象是否已经有对应的 Proxy 对象，如果有，则直接返回，避免重复创建。 然后根据目标对象的类型选择不同的 ProxyHandler (baseHandlers 或 collectionHandlers)。 最后，将 Proxy 对象和目标对象存储到 targetMap 中，方便下次使用。

4.2 Ref 的源码实现

Vue 3 的 ref 函数位于 packages/reactivity/src/ref.ts 文件中。 它的核心逻辑如下：

class RefImpl<T> {
  private _value: T
  public readonly __v_isRef = true

  constructor(value: T) {
    this._value = convert(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    if (hasChanged(newVal, this._value)) {
      this._value = convert(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

function ref<T>(value: T): Ref<UnwrapRef<T>> {
  return new RefImpl(value) as any
}

这段代码定义了 RefImpl 类，它实现了 Ref 接口。 RefImpl 类包含一个 _value 属性，用于存储原始类型的值。 get value() 和 set value() 方法分别负责收集依赖和触发更新。 convert 函数用于将 value 转换为响应式数据 (如果 value 是对象)。 trackRefValue 和 triggerRefValue 函数用于收集和触发 Ref 的依赖。

4.3 依赖收集和触发更新

track 和 trigger 函数是依赖收集和触发更新的核心。 它们位于 packages/reactivity/src/effect.ts 文件中。

// track 函数 (简化版)
export function track(target: object, key: string | symbol) {
  if (!isTracking()) {
    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 = createDep()))
  }

  trackEffects(dep)
}

// trigger 函数 (简化版)
export function trigger(target: object, key: string | symbol) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }

  let deps: (Dep | undefined)[] = []
  deps.push(depsMap.get(key))
  const effects: ReactiveEffect[] = []
  for (const dep of deps) {
    if (dep) {
      effects.push(...([...dep]))
    }
  }
  triggerEffects(createDep(effects))
}

track 函数用于收集依赖。 它首先判断是否需要追踪依赖 (isTracking)。 然后从 targetMap 中获取目标对象的 depsMap，如果没有，则创建一个新的 depsMap。 然后从 depsMap 中获取 key 对应的 dep，如果没有，则创建一个新的 dep。 最后，调用 trackEffects 函数将当前的 activeEffect 添加到 dep 中。

trigger 函数用于触发更新。 它首先从 targetMap 中获取目标对象的 depsMap。 然后从 depsMap 中获取 key 对应的 dep。 最后，遍历 dep 中的所有 ReactiveEffect，并执行它们，触发更新。

总结：响应式双雄，各领风骚

Reactive 和 Ref 是 Vue 3 响应式系统的两大支柱。 Reactive 通过 Proxy 实现深度响应式，适用于对象类型。 Ref 通过 RefImpl 实现浅层响应式，适用于原始类型。 在内存使用和性能方面，它们各有优劣，需要根据具体的场景进行选择。 深入理解它们的内部实现，可以帮助我们更好地使用 Vue 3，写出更高效、更健壮的代码。

好了，今天的讲座就到这里，希望大家有所收获，下次再见！