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

各位靓仔靓女，晚上好！我是你们的老朋友，今天要跟大家聊聊 Vue 3 里两个非常重要的概念：ref 和 reactive。 它们就像是 Vue 3 数据响应式系统的左膀右臂，但背后实现机制却大相径庭。今天咱们就来扒一扒它们的底裤，看看它们到底有啥不一样，以及在实际应用中该怎么选择。

开场白：数据响应式的重要性

在 Web 开发中，数据驱动视图是主流思想。这意味着我们修改数据，视图就能自动更新。Vue 作为一款 MVVM 框架，它的核心就是数据响应式。而 ref 和 reactive 正是实现数据响应式的关键。

第一幕：ref——单身贵族的响应式

ref，顾名思义，reference，引用。它可以把一个普通变量变成响应式数据。我们可以把它想象成一个“单身贵族”，它只关心自己手头上的值。

1. ref 的基本用法

首先，我们来看一个 ref 的简单例子：

import { ref, effect } from 'vue';

const count = ref(0);

effect(() => {
  console.log('count 的值更新了：', count.value);
});

count.value++; // 控制台会输出：count 的值更新了： 1
count.value = 10; // 控制台会输出：count 的值更新了： 10

在这个例子中，我们用 ref(0) 创建了一个响应式变量 count。注意，我们访问和修改 count 的值，需要通过 .value 属性。这是 ref 的一个特点。

2. ref 的底层实现

ref 的底层实现其实很简单，它创建了一个包含 .value 属性的对象，并通过 Object.defineProperty 或 Proxy 劫持了这个属性的 getter 和 setter。

简单模拟 ref 的实现（基于Object.defineProperty）：

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

// 简化的 track 和 trigger 函数
const targetMap = new WeakMap();

function track(target, key) {
  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);
  }

  if (activeEffect) {
    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();
  });
}

let activeEffect = null;

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

// 使用 ref 的例子
const countRef = ref(0);

effect(() => {
  console.log('countRef 的值更新了：', countRef.value);
});

countRef.value++; // 控制台会输出：countRef 的值更新了： 1

这段代码只是一个简化版的模拟，真正的 Vue 3 源码实现要复杂得多，但核心思想是一样的：劫持 .value 属性的访问和修改，从而实现响应式。track函数负责收集依赖，trigger函数负责触发更新。effect函数用于注册副作用，当依赖发生变化时，effect函数会被重新执行。

3. ref 的优势与劣势

• 优势：

  • 简单易用： 适合处理简单类型的数据，比如数字、字符串、布尔值等。
  • 性能较好： 因为只劫持一个 .value 属性，所以性能开销相对较小。
  • 可以用于模板： ref 创建的响应式变量可以直接在模板中使用，无需额外的处理。

• 劣势：

  • 访问需要 .value： 这是 ref 的一个缺点，每次访问和修改值都需要加上 .value，略显繁琐。
  • 不适合处理复杂对象： 虽然 ref 也可以用来处理对象，但当对象内部的属性发生变化时，ref 并不能自动触发更新。这时候就需要配合 triggerRef 手动触发更新。

第二幕：reactive——大家族的响应式

reactive 则是一个“大家长”，它能把一个对象变成响应式对象。它可以深度监听对象的所有属性，任何属性的修改都会触发视图更新。

1. reactive 的基本用法

import { reactive, effect } from 'vue';

const state = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
});

effect(() => {
  console.log('state 的值更新了：', state.name, state.age, state.address.city);
});

state.name = '李四'; // 控制台会输出：state 的值更新了： 李四 18 北京
state.address.city = '上海'; // 控制台会输出：state 的值更新了： 李四 18 上海

在这个例子中，我们用 reactive 创建了一个响应式对象 state。我们可以直接访问和修改 state 的属性，而不需要像 ref 那样使用 .value。

2. reactive 的底层实现

reactive 的底层实现使用了 Proxy。Proxy 是 ES6 提供的一个强大的 API，它可以拦截对象的所有操作，包括属性的访问、修改、删除等。

简单模拟 reactive 的实现：

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

// 简化的 track 和 trigger 函数，与 ref 中的相同
const targetMap = new WeakMap();

function track(target, key) {
  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);
  }

  if (activeEffect) {
    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();
  });
}

let activeEffect = null;

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

// 使用 reactive 的例子
const stateReactive = reactive({
  name: '王五',
  age: 20
});

effect(() => {
  console.log('stateReactive 的值更新了：', stateReactive.name, stateReactive.age);
});

stateReactive.name = '赵六'; // 控制台会输出：stateReactive 的值更新了： 赵六 20

这段代码也是一个简化版的模拟，真正的 Vue 3 源码实现要复杂得多，但核心思想是一样的：使用 Proxy 拦截对象的所有操作，从而实现响应式。注意，reactive 默认是深度监听的，也就是说，对象内部的属性发生变化也会触发更新。

3. reactive 的优势与劣势

• 优势：

  • 使用方便： 可以直接访问和修改对象的属性，无需额外的处理。
  • 深度监听： 默认是深度监听的，可以监听对象内部所有属性的变化。
  • 适合处理复杂对象： 特别适合处理包含多个属性的复杂对象。

• 劣势：

  • 性能开销较大： 因为需要拦截对象的所有操作，所以性能开销相对较大。
  • 不能直接赋值： 不能直接用新的对象替换响应式对象，否则会失去响应式特性。比如：state = { name: '新名字' } 这样是不行的。需要使用 Object.assign 或者展开运算符来更新对象。
  • 只支持对象类型： reactive 只能用于对象类型（包括数组），不能用于简单类型。对于简单类型，需要使用 ref。

第三幕：ref vs reactive：一场内存与性能的较量

现在我们已经了解了 ref 和 reactive 的基本用法和底层实现，接下来我们来比较一下它们在内存占用和性能上的差异。

特性	ref	reactive
底层实现	Object.defineProperty 或 Proxy (仅 .value)	Proxy (拦截对象所有操作)
适用类型	简单类型和对象类型	对象类型 (包括数组)
访问方式	需要 .value	直接访问属性
监听深度	浅监听 (需要 triggerRef 手动触发深度更新)	深度监听
内存占用	较小	较大
性能开销	较小	较大
使用场景	简单数据，需要手动控制更新的情况	复杂对象，需要自动深度监听的情况

1. 内存占用

• ref：由于只劫持 .value 属性，所以内存占用相对较小。
• reactive：由于需要拦截对象的所有操作，所以内存占用相对较大。

2. 性能开销

• ref：由于只劫持一个属性，所以性能开销相对较小。
• reactive：由于需要拦截对象的所有操作，所以性能开销相对较大。特别是当对象属性很多时，性能开销会更加明显。

3. 如何选择？

那么，在实际开发中，我们该如何选择 ref 和 reactive 呢？

• 简单数据用 ref： 如果你需要处理的是简单类型的数据，比如数字、字符串、布尔值等，那么 ref 是一个不错的选择。
• 复杂对象用 reactive： 如果你需要处理的是包含多个属性的复杂对象，那么 reactive 更加方便。
• 性能敏感的场景用 ref： 如果你的应用对性能要求很高，那么应该尽量避免使用 reactive，而选择 ref。当然，这并不是绝对的，你需要根据实际情况进行权衡。
• 手动控制更新用 ref： 有时候，你可能需要手动控制更新的时机，这时候 ref 配合 triggerRef 就能派上用场。

第四幕：进阶技巧：shallowRef 和 shallowReactive

Vue 3 还提供了 shallowRef 和 shallowReactive，它们是 ref 和 reactive 的浅层版本。

• shallowRef：只会追踪 .value 的变化，不会追踪 .value 内部属性的变化。
• shallowReactive：只会追踪对象第一层属性的变化，不会追踪对象内部属性的变化。

import { shallowRef, shallowReactive, effect } from 'vue';

// shallowRef 示例
const objRef = shallowRef({ name: '张三', age: 18 });

effect(() => {
  console.log('objRef 的值更新了：', objRef.value);
});

objRef.value.name = '李四'; // 不会触发更新，因为是浅层监听
objRef.value = { name: '王五', age: 20 }; // 会触发更新，因为替换了整个对象

// shallowReactive 示例
const stateShallow = shallowReactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
});

effect(() => {
  console.log('stateShallow 的值更新了：', stateShallow.name, stateShallow.age, stateShallow.address);
});

stateShallow.name = '李四'; // 会触发更新
stateShallow.address.city = '上海'; // 不会触发更新，因为是浅层监听

shallowRef 和 shallowReactive 的主要作用是优化性能。当你的应用不需要深度监听时，可以使用它们来减少性能开销。

第五幕：总结与展望

今天我们深入剖析了 Vue 3 中 ref 和 reactive 的底层实现差异，以及它们在内存占用和性能上的优劣。希望通过今天的学习，大家能够更加深入地理解 Vue 3 的数据响应式系统，并在实际开发中选择合适的 API。

• ref 适合处理简单数据，内存占用小，性能好，但需要 .value 访问，且默认是浅监听。
• reactive 适合处理复杂对象，使用方便，默认是深度监听，但内存占用大，性能开销高。
• shallowRef 和 shallowReactive 是浅层版本，可以用来优化性能。

Vue 的响应式系统还在不断发展，未来可能会有更多更强大的 API 出现。让我们一起期待吧！

结束语

好了，今天的分享就到这里。希望大家有所收获。记住，理解原理才能更好地运用工具。下次再见！