各位观众老爷们，大家好！我是你们的老朋友，Bug终结者。今天咱们不开车，不开玩笑，正儿八经地聊聊Vue 3里两个重量级人物：ref和reactive。保证大家听完，以后面试再也不怕被问得哑口无言，写代码也能更加得心应手。
咱们今天的内容主要分三个部分：
- 底层实现大揭秘： 扒一扒
ref和reactive的底裤，看看它们到底是怎么工作的。 - 内存占用大比拼： 比比谁更省资源，看看在不同场景下谁更适合。
- 性能巅峰对决： 看看谁更快更流畅，避免性能瓶颈。
准备好了吗？Let’s go！
一、底层实现大揭秘
要理解ref和reactive，首先得知道Vue 3的核心魔法：Proxy（代理）。这玩意儿就像一个门卫，所有对数据的访问和修改都得经过它。Proxy可以监听数据的变化，从而触发Vue的更新机制。
1. ref：单身贵族的秘密
ref主要用来包装单个的原始类型值（例如：number、string、boolean）或者引用类型值（例如：object、array）。它把值放在一个对象里，然后用Proxy监听这个对象的value属性。
简单来说，ref就像给你的数据找了个房子，Proxy就是这个房子的门卫，只负责看守value这个房间。
看一段简化的模拟ref实现的代码：
function myRef(value) {
const refObject = {
value: value
};
return new Proxy(refObject, {
get(target, key, receiver) {
if (key === 'value') {
// 收集依赖，也就是告诉Vue，这个数据变化了，需要更新视图
track(target, 'value');
return Reflect.get(target, key, receiver);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
if (key === 'value') {
if (target.value !== value) {
target.value = value;
// 触发更新，告诉Vue，赶紧刷新视图吧！
trigger(target, 'value');
}
return true;
}
return Reflect.set(target, key, value, receiver);
}
});
}
// 简化的依赖收集和触发函数 (实际Vue3实现比这复杂得多)
let 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) return;
deps.forEach(effect => {
effect(); // 执行副作用函数，更新视图
});
}
// 模拟一个 effect 函数
function effect(fn) {
activeEffect = fn;
fn(); // 立即执行一次，收集依赖
activeEffect = null;
}
// 使用示例
let count = myRef(0);
effect(() => {
console.log('Count is:', count.value); // 访问 count.value 会触发 get
});
count.value = 1; // 修改 count.value 会触发 set，并触发更新这段代码里，myRef函数创建了一个包含value属性的对象，然后用Proxy来拦截对value属性的访问和修改。track函数负责收集依赖，trigger函数负责触发更新。
重点：
ref实际上是对一个对象的value属性进行代理。- 访问和修改
ref的值必须通过.value。
2. reactive：大家庭的守护者
reactive主要用来包装对象，包括普通对象、数组、Map、Set等。它直接用Proxy监听整个对象的所有属性。
reactive就像给你的对象找了个小区，Proxy是整个小区的门卫，负责看守小区里的每一户人家。
看一段简化的模拟reactive实现的代码：
function myReactive(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) {
if (target[key] !== value) {
target[key] = value;
// 触发更新
trigger(target, key);
}
return true;
}
});
}
// 简化的依赖收集和触发函数 (同上)
// ...
// 使用示例
let person = myReactive({ name: '张三', age: 20 });
effect(() => {
console.log('Name is:', person.name, 'Age is:', person.age); // 访问 person.name 和 person.age 都会触发 get
});
person.age = 21; // 修改 person.age 会触发 set，并触发更新这段代码里，myReactive函数直接用Proxy来拦截对整个对象的属性的访问和修改。
重点：
reactive直接对整个对象进行代理。- 访问和修改
reactive的值可以直接通过.属性名。
底层实现差异总结：
| 特性 | ref |
reactive |
|---|---|---|
| 包装对象 | 单个值（原始类型或引用类型） | 对象（包括普通对象、数组、Map、Set等） |
| 代理方式 | 对包含值的对象的value属性进行代理 |
直接对整个对象进行代理 |
| 访问方式 | 需要通过.value访问和修改值 |
可以直接通过.属性名访问和修改值 |
| 使用场景 | 主要用于包装单个值，方便在模板中使用，并且在 JavaScript 代码中可以方便地进行响应式更新。 | 主要用于包装复杂对象，方便对整个对象进行响应式管理。 |
二、内存占用大比拼
内存占用方面，ref和reactive各有千秋。
-
ref： 因为ref实际上是对一个对象进行代理，所以会比直接使用原始类型值多占用一些内存。但是，如果你的数据本来就是一个对象，那么使用ref和直接使用reactive的内存占用差别不大。 -
reactive：reactive会递归地将对象的所有属性都变成响应式的。如果你的对象非常大，属性非常多，那么reactive会占用更多的内存。
举个例子：
// 使用 ref
let countRef = ref(0); // 相当于创建了一个 { value: 0 } 的对象，并对其进行代理
// 直接使用原始类型
let count = 0;
// 使用 reactive
let personReactive = reactive({
name: '张三',
age: 20,
address: {
city: '北京',
street: '长安街'
}
}); // 会递归地将 personReactive.address 也变成响应式的
// 直接使用对象
let person = {
name: '张三',
age: 20,
address: {
city: '北京',
street: '长安街'
}
}; // 不会变成响应式的在这个例子中，countRef会比count多占用一些内存，因为countRef实际上是一个对象。personReactive会递归地将address也变成响应式的，所以会比person占用更多的内存。
内存占用总结：
| 特性 | 内存占用 | 适用场景 |
|---|---|---|
ref |
相对较小，因为只对一个对象的value属性进行代理。 |
包装单个原始类型值或引用类型值，对内存占用要求较高的场景。 |
reactive |
相对较大，特别是当对象属性很多或者层级很深时，因为会递归地将对象的所有属性都变成响应式的。 | 包装复杂对象，需要对整个对象进行响应式管理的场景。 |
三、性能巅峰对决
性能方面，ref和reactive的差异主要体现在更新的粒度上。
-
ref：ref的更新粒度更小，只有当value属性发生变化时才会触发更新。 -
reactive：reactive的更新粒度更大，当对象的任何属性发生变化时都会触发更新。
举个例子：
// 使用 reactive
let personReactive = reactive({
name: '张三',
age: 20,
address: {
city: '北京',
street: '长安街'
}
});
// 修改 personReactive.address.city
personReactive.address.city = '上海'; // 会触发 personReactive 的更新在这个例子中，即使只修改了personReactive.address.city，也会触发personReactive的更新，因为reactive监听的是整个对象。
性能优化建议：
- 按需使用： 不要过度使用
reactive，只对需要响应式的数据使用reactive。 - 拆分对象： 如果你的对象非常大，可以考虑将对象拆分成多个小对象，然后分别使用
reactive或ref进行包装。 - 使用
shallowReactive和shallowRef：shallowReactive只会对对象的第一层属性进行响应式处理，不会递归地处理深层属性。shallowRef只会对value进行响应式处理，不会对value内部的属性进行响应式处理。 这两个可以提高性能，但是使用时需要考虑好场景是否合适。 - 使用
readonly和shallowReadonly: 可以防止意外修改，并且可以进行一些性能优化。
性能总结：
| 特性 | 性能 | 适用场景 |
|---|---|---|
ref |
更新粒度小，性能相对较高，因为只有当value属性发生变化时才会触发更新。 |
需要频繁更新单个值，对性能要求较高的场景。 |
reactive |
更新粒度大，性能相对较低，特别是当对象属性很多或者层级很深时，因为当对象的任何属性发生变化时都会触发更新。 | 需要对整个对象进行响应式管理，更新频率不高的场景。 |
shallowReactive |
只对第一层属性进行响应式处理，性能比 reactive 高，但响应式能力有限。 |
只需要对对象的第一层属性进行响应式管理的场景。 |
shallowRef |
只对 value 进行响应式处理，性能比 ref 高，但响应式能力有限。 |
只需要对 value 进行响应式管理，而不需要对 value 内部的属性进行响应式管理的场景。 |
总结
ref和reactive是Vue 3中非常重要的两个API，理解它们的底层实现差异、内存占用和性能特点，可以帮助我们更好地使用它们，写出更高效的Vue应用。
总而言之，ref适合单身贵族，简单直接；reactive适合大家庭，照顾周全。 用哪个，取决于你的数据结构和应用场景。
好了，今天的讲座就到这里，希望大家有所收获。如果觉得讲得还不错，记得点个赞哦！下次再见！