分析 Vue 3 源码中 `ref` 和 `reactive` 的底层实现差异，以及它们在内存占用和性能上各自的优势与劣势。

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 里面两个非常重要的概念：ref 和 reactive。 它们就像一对双胞胎，长得有点像，但性格却大相径庭。今天，咱们就来扒一扒它们的底裤，看看它们在底层实现、内存占用和性能上到底有什么区别。

开场白：认识一下我们的主角

首先，用人话说说 ref 和 reactive 是干嘛的。

• ref: 简单来说，它就像一个“箱子”，你把任何值（原始值、对象、数组等等）放进去，ref 就会帮你创建一个“响应式引用”。你修改箱子里的东西，Vue 就能知道，然后更新视图。

• reactive: 它就像一个“魔法师”，能把一个普通的对象变成响应式对象。 你修改这个对象的属性，Vue 也能知道，然后更新视图。

第一幕：底层实现，扒开它们的底裤

好，现在是重头戏，咱们来看看它们的底层实现。

1. ref 的底层实现

ref 的核心在于创建一个包含 value 属性的对象，并使用 Object.defineProperty 或 Proxy 来拦截对 value 属性的访问和修改。 简单起见，我们用 Object.defineProperty 来模拟：

function myRef(value) {
  const refObject = {
    get value() {
      track(refObject, 'value'); // 追踪依赖
      return value;
    },
    set value(newValue) {
      if (newValue !== value) {
        value = newValue;
        trigger(refObject, 'value'); // 触发更新
      }
    }
  };
  return refObject;
}

// 模拟依赖追踪和触发
let activeEffect = null;

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

const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    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) {
    deps.forEach(effect => {
      effect();
    });
  }
}

// 例子
const count = myRef(0);

effect(() => {
  console.log('Count is:', count.value);
});

count.value++; // 输出 "Count is: 1"

代码解释：

• myRef 函数创建了一个对象，这个对象有一个 value 属性，我们使用 get 和 set 拦截了对 value 的访问和修改。
• track 函数用于追踪依赖，也就是当 value 被读取时，记录下哪个 effect 函数依赖了这个 value。
• trigger 函数用于触发更新，也就是当 value 被修改时，通知所有依赖这个 value 的 effect 函数重新执行。
• effect 函数模拟了 Vue 的响应式副作用，当依赖的数据发生变化时，它会被重新执行。
• targetMap 是一个 WeakMap，用于存储目标对象和依赖关系。

Vue 3 实际源码中，ref 内部使用了 RefImpl 类来实现，并且使用了 Proxy 或 Object.defineProperty 来进行依赖追踪和触发更新，具体取决于浏览器是否支持 Proxy。

2. reactive 的底层实现

reactive 的核心是使用 Proxy 来拦截对整个对象的所有属性的访问和修改。

function myReactive(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 person = myReactive({ name: '张三', age: 20 });

effect(() => {
  console.log('Person is:', person.name, person.age);
});

person.age = 21; // 输出 "Person is: 张三 21"

代码解释：

• myReactive 函数创建了一个 Proxy 对象，这个 Proxy 对象拦截了对 target 对象的所有属性的访问和修改。
• get 拦截器用于追踪依赖，也就是当对象的属性被读取时，记录下哪个 effect 函数依赖了这个属性。
• set 拦截器用于触发更新，也就是当对象的属性被修改时，通知所有依赖这个属性的 effect 函数重新执行。
• Reflect.get 和 Reflect.set 用于执行默认的属性访问和修改操作。

Vue 3 实际源码中，reactive 内部使用了 createReactiveObject 函数来创建响应式对象，并且会根据不同的对象类型选择不同的处理方式，例如 readonly、shallowReactive 等。

总结一下：

特性	ref	reactive
作用对象	任何值 (原始值, 对象, 数组)	对象
底层实现	Object.defineProperty 或 Proxy (包裹 value 属性)	Proxy (拦截整个对象)
访问方式	.value	直接访问属性
使用场景	需要单独追踪和控制某个值的变化时	需要将整个对象变成响应式时

第二幕：内存占用，算算它们的账

接下来，咱们来算算 ref 和 reactive 的内存账。

• ref: 因为 ref 只是对一个值的简单封装，所以它的内存占用相对较小。 每次使用 ref ， 都会创建一个新的包含 value 属性的对象。 对于原始值来说，这个开销可以忽略不计；但对于大型对象来说，如果大量使用 ref 包裹，可能会增加一些内存占用。

• reactive: reactive 会递归地将整个对象变成响应式，包括对象的所有属性和嵌套对象。 这意味着，如果你的对象非常大，或者嵌套层级很深，reactive 的内存占用会比较高。

举个栗子：

// ref 示例
const countRef = ref(0); // 创建一个 ref 对象，包含一个 value 属性，值为 0

// reactive 示例
const personReactive = reactive({ name: '李四', age: 25, address: { city: '北京' } }); // 创建一个 reactive 对象，递归地将 personReactive 对象的所有属性变成响应式

在这个例子中，countRef 的内存占用会比 personReactive 小得多，因为 personReactive 需要递归地处理 address 对象。

结论：

• 对于简单的数据，ref 和 reactive 的内存占用差异不大。
• 对于大型对象或嵌套对象，reactive 的内存占用会明显高于 ref。
• 如果只需要追踪和控制某个值的变化，使用 ref 可以节省内存。
• 如果需要将整个对象变成响应式，使用 reactive 更方便。

第三幕：性能比拼，跑个分看看

最后，咱们来比拼一下 ref 和 reactive 的性能。

• ref: 由于 ref 只需要追踪和控制 value 属性的变化，所以它的性能通常比较好。 每次修改 ref 的 value，只需要触发与该 ref 相关的依赖更新。

• reactive: reactive 需要拦截对整个对象的所有属性的访问和修改，所以它的性能可能会受到一些影响。 当修改 reactive 对象的某个属性时，可能会触发与该对象相关的多个依赖更新，特别是当对象比较大或者嵌套层级比较深时。

举个栗子：

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

effect(() => {
  console.log('Count is:', countRef.value);
});

countRef.value++; // 只会触发与 countRef 相关的依赖更新

// reactive 示例
const personReactive = reactive({ name: '王五', age: 30 });

effect(() => {
  console.log('Person is:', personReactive.name, personReactive.age);
});

personReactive.age++; // 可能会触发与 name 和 age 相关的依赖更新

在这个例子中，修改 countRef.value 只会触发一个依赖更新，而修改 personReactive.age 可能会触发多个依赖更新，因为 personReactive 对象可能还有其他属性被依赖。

结论：

• 对于简单的数据，ref 和 reactive 的性能差异不大。
• 对于大型对象或嵌套对象，ref 的性能通常优于 reactive。
• 如果只需要追踪和控制某个值的变化，使用 ref 可以提高性能。
• 如果需要将整个对象变成响应式，并且对象比较小，使用 reactive 也是可以接受的。

第四幕：最佳实践，用好它们的姿势

了解了 ref 和 reactive 的底层实现、内存占用和性能差异之后，咱们来看看如何在实际开发中选择它们。

场景	推荐使用	理由
需要追踪原始值 (number, string, boolean)	ref	ref 可以直接追踪原始值的变化，而且性能更好。
需要追踪单个对象或数组	ref	虽然 reactive 也可以追踪对象和数组的变化，但是如果只需要追踪单个对象或数组，使用 ref 更简洁、更高效。
需要将整个对象变成响应式，且对象比较小	reactive	reactive 可以递归地将整个对象变成响应式，使用起来非常方便。如果对象比较小，性能影响可以忽略不计。
需要将整个对象变成响应式，且对象比较大	reactive (结合 shallowReactive 或 readonly)	如果对象比较大，可以考虑使用 shallowReactive 或 readonly 来减少性能开销。 shallowReactive 只会将对象的第一层属性变成响应式，而 readonly 可以防止对象被修改。
需要在组件之间共享状态	ref 或 reactive (结合 provide 和 inject)	可以使用 ref 或 reactive 创建响应式状态，然后使用 provide 和 inject 将状态共享给其他组件。
需要在模板中使用响应式数据	ref 或 reactive	在模板中可以直接使用 ref 的 value 属性，也可以直接使用 reactive 对象的属性。

总结

ref 和 reactive 各有千秋，没有绝对的好坏，只有适合不适合。 选择哪个，取决于你的具体需求。 就像选对象一样，适合自己的才是最好的！

最后，希望今天的讲座能让你对 ref 和 reactive 有更深入的了解。 如果你还有其他问题，欢迎随时提问。 下次再见！