分析 Vue 3 源码中 `ref` 和 `reactive` 的本质区别，以及它们在内存占用和性能上各自的优势与劣势。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 里面两个重量级选手：ref 和 reactive。搞清楚它们，就像打通了任督二脉，Vue 3 这门武功你就算入门了。

别看它们都是用来创建响应式数据的，但本质上，这俩哥们儿的路子完全不一样。今天咱们就来扒一扒它们的底裤，看看谁更省内存，谁跑得更快。

开场白：响应式数据的需求与痛点

在开始“解剖”ref 和 reactive 之前，咱们先来回顾一下，为啥我们需要响应式数据？

想象一下，你写了一个 Vue 组件，页面上显示一个数字，用户点击按钮，这个数字要跟着变化。最原始的方式，你可能直接修改 DOM 元素的内容。但这样做非常繁琐，你需要手动去找到对应的 DOM 元素，然后更新它。

而且，如果这个数字在多个地方被使用，你需要同时更新所有的地方，简直就是灾难！

Vue 的响应式数据，就是来解决这个问题的。你只需要把数据交给 Vue 管理，当数据发生变化时，Vue 会自动更新页面。你只需要关注数据本身，而不需要关心 DOM 操作。

Vue 2 时代，我们用 Object.defineProperty 来实现响应式。但这种方式有一些限制，比如无法监听对象属性的新增和删除，也无法监听数组的变化。

Vue 3 采用了 Proxy 来实现响应式，解决了这些问题。 Proxy 可以监听对象的所有操作，包括属性的读取、设置、新增、删除等等。

好，有了这些背景知识，咱们就可以开始深入了解 ref 和 reactive 了。

第一回合：本质区别大揭秘

咱们先从最根本的区别说起：

ref：创造一个“引用”

ref 本质上是对一个值进行包装，返回一个带有 .value 属性的对象。这个 .value 属性才是真正存储数据的地方。当你访问或者修改 ref 的值时，实际上是在访问或者修改 .value 属性。

你可以把 ref 看作是一个“盒子”，你把数据放进这个盒子里，然后通过盒子的 .value 属性来访问或者修改数据。
```
import { ref } from 'vue';

const count = ref(0); // count 是一个对象，count.value 才是 0

console.log(count.value); // 输出: 0

count.value++;

console.log(count.value); // 输出: 1
```
reactive：创造一个“代理”

reactive 直接对一个对象进行深度响应式转换，返回一个 Proxy 对象。这个 Proxy 对象会拦截对原对象的所有操作，当对象发生变化时，Vue 会自动更新页面。

你可以把 reactive 看作是一个“代理人”，你把对象交给这个代理人，然后通过代理人来访问或者修改对象。代理人会帮你处理所有的响应式逻辑。
```
import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 18
});

console.log(state.name); // 输出: 张三

state.age++;

console.log(state.age); // 输出: 19
```

用表格总结一下：

特性	`ref`	`reactive`
本质	对值进行包装，返回一个带有 `.value` 属性的对象	对对象进行深度响应式转换，返回一个 Proxy 对象
适用类型	任何类型的值（包括原始类型和对象）	对象
访问方式	通过 `.value` 属性访问值	直接访问对象属性
响应式深度	浅层响应式（只监听 `.value` 属性的变化）	深度响应式（监听对象的所有属性的变化）

第二回合：使用场景大 PK

了解了本质区别，咱们再来看看它们各自适合在什么场景下使用：

ref 的用武之地
- 原始类型数据： 当你需要创建一个响应式的数字、字符串、布尔值等原始类型数据时，ref 是你的首选。
```
const message = ref('Hello Vue!');
const isShow = ref(true);
```
- 单个响应式变量： 当你只需要一个单独的响应式变量时，ref 更加简洁明了。
```
const count = ref(0);

function increment() {
  count.value++;
}
```
- 在 reactive 对象中使用原始类型： 如果你需要在 reactive 对象中使用原始类型数据，也必须使用 ref 来包装。
```
const state = reactive({
  name: '李四',
  age: ref(20) // 必须使用 ref
});

console.log(state.age.value); // 输出: 20

state.age.value++;

console.log(state.age.value); // 输出: 21
```

reactive 的闪光时刻

复杂对象： 当你需要创建一个包含多个属性的复杂对象时，reactive 更加方便。

const user = reactive({
  name: '王五',
  age: 25,
  address: {
    city: '北京',
    street: '长安街'
  }
});

console.log(user.name); // 输出: 王五
console.log(user.address.city); // 输出: 北京

user.age++;
user.address.city = '上海';

console.log(user.age); // 输出: 26
console.log(user.address.city); // 输出: 上海

组件状态管理： reactive 非常适合用来管理组件的状态，比如表单数据、列表数据等等。

const formState = reactive({
  username: '',
  password: ''
});

function handleSubmit() {
  // 处理表单提交
}

再来个表格总结一下使用场景：

场景	`ref`	`reactive`
原始类型数据	必须使用	不适用
单个响应式变量	推荐使用	不推荐使用
复杂对象	不适用	推荐使用
`reactive` 对象中的原始类型	必须使用	N/A
组件状态管理	不适用	推荐使用

第三回合：内存占用大比拼

内存占用也是我们选择 ref 还是 reactive 的一个重要考量因素。

ref 的内存足迹

ref 的内存占用相对较小。因为它只是对一个值进行包装，创建一个包含 .value 属性的对象。

对于原始类型数据，ref 的内存占用几乎可以忽略不计。

对于对象类型数据，ref 只会监听 .value 属性的变化，而不会监听对象内部属性的变化。因此，ref 的内存占用也相对较小。
reactive 的内存消耗

reactive 的内存占用相对较大。因为它需要对整个对象进行深度响应式转换，创建一个 Proxy 对象，并且需要监听对象的所有属性的变化。

对于包含大量属性的对象，reactive 的内存占用会比较明显。

总结：

如果你的数据量很小，或者只需要监听单个变量的变化，ref 是一个更省内存的选择。
如果你的数据量很大，并且需要监听对象的所有属性的变化，reactive 的内存占用会比较高。

第四回合：性能对决

除了内存占用，性能也是我们关注的重点。

ref 的速度

ref 的性能相对较好。因为它只需要监听 .value 属性的变化，当 .value 属性发生变化时，Vue 只需要更新相关的 DOM 元素。

对于原始类型数据，ref 的性能几乎可以忽略不计。

对于对象类型数据，ref 的性能也相对较好，因为它只需要监听 .value 属性的变化，而不需要监听对象内部属性的变化。
reactive 的效率

reactive 的性能相对较差。因为它需要监听对象的所有属性的变化，当对象内部的任何属性发生变化时，Vue 都需要更新相关的 DOM 元素。

对于包含大量属性的对象，reactive 的性能会比较明显。

总结：

如果你的数据量很小，或者只需要监听单个变量的变化，ref 是一个更快的选择。
如果你的数据量很大，并且需要监听对象的所有属性的变化，reactive 的性能会比较差。

第五回合：源码剖析（可选，但强烈建议了解）

为了更深入地了解 ref 和 reactive 的本质，咱们可以简单地看一下它们的源码（简化版）：

ref 的实现

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

可以看到，ref 实际上创建了一个包含 value 属性的对象，并且使用了 track 和 trigger 函数来实现响应式。

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 result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  });
}

可以看到，reactive 实际上创建了一个 Proxy 对象，并且使用了 track 和 trigger 函数来实现响应式。 Proxy 拦截了对象的 get 和 set 操作，当属性被访问或者修改时，会分别调用 track 和 trigger 函数。

第六回合：最佳实践与避坑指南

最后，咱们来总结一下 ref 和 reactive 的最佳实践，以及一些需要避免的坑：

最佳实践
- 优先使用 ref： 在可以使用 ref 的情况下，尽量使用 ref。因为 ref 的内存占用更小，性能更好。
- 合理使用 reactive： 只有在需要监听对象的所有属性的变化时，才使用 reactive。
- 避免过度使用 reactive： 如果一个对象只需要监听部分属性的变化，可以使用 ref 来包装这些属性，然后将它们组合成一个 reactive 对象。
- 注意 ref 的解包： 在模板中使用 ref 时，Vue 会自动解包 ref，你不需要手动访问 .value 属性。但在 JavaScript 代码中，你需要手动访问 .value 属性。
- 使用 readonly 和 shallowReactive： 如果你需要创建一个只读的响应式对象，可以使用 readonly 函数。如果你只需要创建一个浅层响应式对象，可以使用 shallowReactive 函数。这可以提高性能，并减少内存占用。
避坑指南
- 不要直接修改 reactive 对象的属性： 应该使用 proxy 对象来修改属性，否则 Vue 无法监听到变化。
- 不要将 ref 对象赋值给 reactive 对象的属性： 这样会导致 ref 对象失去响应式。应该使用 ref 来包装原始类型数据，然后将 ref 对象赋值给 reactive 对象的属性。
- 小心循环依赖： 在使用 reactive 时，要小心循环依赖，否则会导致栈溢出。
- 避免在计算属性中使用副作用： 计算属性应该只依赖于响应式数据，并且不应该有任何副作用。

最终总结：选择困难症终结者

维度	`ref`	`reactive`	选择建议
数据类型	原始类型，单个响应式变量	复杂对象	优先 `ref`，复杂对象用 `reactive`
响应式深度	浅层	深度	仅需监听少量属性变化用 `ref`，需要监听所有属性变化用 `reactive`
内存占用	小	大	内存敏感型应用优先考虑 `ref`
性能	高	低	对性能要求高的场景优先考虑 `ref`
使用场景	简单状态管理，在 `reactive` 中包裹原始类型	复杂组件状态管理，表单数据，列表数据等	根据实际需求选择，避免过度使用 `reactive`
核心理念	包装值，通过 `.value` 访问	创建代理，直接访问属性	理解其本质，避免混用

好了，今天的讲座就到这里。希望大家对 ref 和 reactive 有了更深入的了解。记住，没有最好的选择，只有最适合你的选择。在实际开发中，要根据具体情况，选择合适的响应式方案。

如果大家还有什么疑问，欢迎随时提问。谢谢大家！咱们下次再见！

发表回复 取消回复

发表回复取消回复