各位靓仔靓女，早上好！（或者下午/晚上好，取决于你们看到这段文字的时间）。今天咱们不聊八卦，也不聊职场PUA，咱们来点实在的，聊聊Vue 3里面两个重要的家伙：reactive和ref。
很多人刚接触Vue 3的时候，都会被这两个东西搞得有点晕头转向。哎，都是用来声明响应式数据的，那到底啥时候用reactive，啥时候用ref呢？它们内部又藏着啥秘密？今天，我就带着大家扒一扒它们的底裤，不对，是源码，看看它们在数据封装上的设计哲学和性能差异。
一、开胃小菜：响应式数据是啥？
在深入reactive和ref之前，咱们先简单回顾一下啥是响应式数据。简单来说，就是当你的数据发生变化时，Vue能够自动更新视图。这种机制让开发者可以专注于数据的逻辑，而不用手动去操作DOM，大大提高了开发效率。
Vue 2主要通过Object.defineProperty来实现响应式，而Vue 3则采用了更加强大的Proxy。Proxy的优势在于它可以监听对象的更多操作，例如属性的添加和删除，而Object.defineProperty只能监听已存在的属性。
二、主角登场：reactive——对象的最佳拍档
reactive主要用于将一个普通的JavaScript对象转换成响应式对象。它会递归地将对象的所有属性都变成响应式的。
举个例子：
import { reactive } from 'vue';
const state = reactive({
name: '张三',
age: 25,
address: {
city: '北京',
street: '长安街'
}
});
console.log(state.name); // 输出：张三
state.name = '李四'; // 当state.name发生变化时，所有用到state.name的视图都会自动更新
console.log(state.name); // 输出：李四
state.address.city = '上海'; // 嵌套对象也会被响应式追踪源码解读（简化版）：
reactive的核心在于使用Proxy来拦截对对象的操作。 当你访问或者修改对象属性时，Proxy会通知Vue，Vue则会触发相应的更新。
虽然真正的源码非常复杂，但我们可以用一个简化的版本来理解它的工作原理：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target; // 不是对象，直接返回
}
const proxy = new Proxy(target, {
get(target, key, receiver) {
// 追踪依赖，当属性被访问时，记录下来
track(target, key);
const res = Reflect.get(target, key, receiver);
return reactive(res); // 递归处理嵌套对象
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
// 触发更新，当属性被修改时，通知Vue
trigger(target, key);
}
return result;
}
});
return proxy;
}
// 简化的track函数，用于收集依赖
function track(target, key) {
// 实际实现会更复杂，需要考虑组件实例、副作用函数等
console.log(`Tracking ${key}`);
}
// 简化的trigger函数，用于触发更新
function trigger(target, key) {
// 实际实现会更复杂，需要执行相关的副作用函数
console.log(`Triggering ${key}`);
}
const data = { name: '王五' };
const reactiveData = reactive(data);
console.log(reactiveData.name); // 输出：Tracking name，王五
reactiveData.name = '赵六'; // 输出：Triggering name在这个简化版本中，track函数负责收集依赖，也就是记录哪些视图或计算属性用到了这个属性。trigger函数负责触发更新，也就是通知Vue更新用到这个属性的视图。
reactive的注意事项：
-
只能用于对象：
reactive只能用于对象（包括数组），不能用于原始类型（例如字符串、数字、布尔值）。 -
浅层响应式：
reactive会递归地将对象的所有属性都变成响应式的，这意味着嵌套对象也会被响应式追踪。但是，如果你直接替换了整个对象，那么新的对象将不会是响应式的。例如：const state = reactive({ profile: { name: '张三', age: 25 } }); state.profile = { name: '李四', age: 30 }; // 这样替换后的profile对象不再是响应式的要解决这个问题，可以使用
Object.assign或者展开运算符...来更新对象：state.profile = Object.assign({}, state.profile, { name: '李四', age: 30 }); // 或者 state.profile = { ...state.profile, name: '李四', age: 30 }; -
解构问题： 当你解构
reactive对象时，解构出来的属性将不再是响应式的。例如：const state = reactive({ name: '张三', age: 25 }); const { name, age } = state; // name和age不再是响应式的 name = '李四'; // 无法触发视图更新要解决这个问题，可以使用
toRefs将reactive对象的属性转换成ref对象：import { reactive, toRefs } from 'vue'; const state = reactive({ name: '张三', age: 25 }); const { name, age } = toRefs(state); // name和age现在是ref对象 name.value = '李四'; // 可以触发视图更新
三、另一位主角：ref——原始类型的救星
ref主要用于将一个原始类型的值转换成响应式数据。它会将值包装在一个对象中，并通过.value属性来访问和修改这个值。
举个例子：
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出：0
count.value++; // 当count.value发生变化时，所有用到count.value的视图都会自动更新
console.log(count.value); // 输出：1源码解读（简化版）：
ref的实现相对简单，它创建一个包含value属性的对象，并使用Object.defineProperty来监听value属性的变化。
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函数，用于收集依赖
function track(target, key) {
// 实际实现会更复杂，需要考虑组件实例、副作用函数等
console.log(`Tracking ${key}`);
}
// 简化的trigger函数，用于触发更新
function trigger(target, key) {
// 实际实现会更复杂，需要执行相关的副作用函数
console.log(`Triggering ${key}`);
}
const myRef = ref(10);
console.log(myRef.value); // Tracking value 10
myRef.value = 20; // Triggering value
console.log(myRef.value); // Tracking value 20ref的注意事项：
-
必须通过
.value访问： 你必须通过.value属性来访问和修改ref的值。直接访问ref对象本身是没有任何意义的。 -
模板中的自动解包： 在Vue的模板中，
ref会被自动解包，所以你可以直接使用count，而不需要写成count.value。例如：<div> <p>Count: {{ count }}</p> <!-- 这里直接使用count，而不是count.value --> <button @click="count++">Increment</button> </div> -
可以用于对象： 虽然
ref主要用于原始类型，但它也可以用于对象。当ref用于对象时，它实际上是创建了一个包含该对象的ref对象。但是，只有ref对象的.value属性是响应式的，而对象内部的属性需要使用reactive来使其响应式。const obj = ref({ name: '张三', age: 25 }); obj.value.name = '李四'; // 无法触发视图更新，因为obj.value.name不是响应式的 const reactiveObj = reactive({ name: '王五', age: 30 }); const reactiveRef = ref(reactiveObj); reactiveRef.value.name = '赵六'; // 可以触发视图更新，因为reactiveObj是响应式的
四、巅峰对决：reactive vs ref，谁更胜一筹？
现在，我们已经了解了reactive和ref的基本用法和内部原理。那么，它们之间到底有什么区别呢？我们用一张表格来总结一下：
| 特性 | reactive |
ref |
|---|---|---|
| 适用类型 | 对象（包括数组） | 原始类型和对象 |
| 访问方式 | 直接访问属性 | 通过.value访问 |
| 内部实现 | Proxy |
Object.defineProperty（简化版本） |
| 响应式深度 | 递归 | 浅层（如果用于对象，只有.value是响应式的） |
| 使用场景 | 需要将整个对象都变成响应式时 | 需要将原始类型的值变成响应式时，或者需要手动控制响应式数据的访问和修改时 |
| 模板使用 | 直接使用 | 自动解包，直接使用 |
| 解构问题 | 解构后失去响应式 | 解构后仍然是ref对象，需要通过.value访问 |
toRefs |
可以将reactive对象的属性转换成ref对象 |
N/A |
设计哲学：
reactive： 偏向于“整体响应式”，它将整个对象都变成响应式的，让你无需关心对象的内部结构。ref： 偏向于“手动控制”，它将值包装在一个对象中，并通过.value属性来访问和修改，让你对响应式数据的访问和修改有更多的控制权。
性能差异：
理论上，Proxy的性能比Object.defineProperty更好，因为Proxy可以拦截更多的操作，并且是惰性求值的。但是，在实际应用中，这种性能差异通常可以忽略不计。
五、实战演练：选择正确的姿势
那么，在实际开发中，我们应该如何选择reactive和ref呢？
- 优先使用
reactive： 如果你需要将一个对象变成响应式的，并且不需要手动控制响应式数据的访问和修改，那么应该优先使用reactive。 - 使用
ref处理原始类型： 如果你需要将一个原始类型的值变成响应式的，那么必须使用ref。 - 使用
toRefs解决解构问题： 如果你需要解构reactive对象，并且希望解构出来的属性仍然是响应式的，那么可以使用toRefs。 - 手动控制： 有时候，你可能需要手动控制响应式数据的访问和修改，例如在某些复杂的场景下，你需要根据不同的条件来更新数据。在这种情况下，可以使用
ref来获得更多的控制权。
举个例子：
假设你需要开发一个简单的计数器组件：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
</script>在这个例子中，我们使用了ref来声明计数器的值，因为计数器是一个原始类型的值。
再举个例子：
假设你需要开发一个用户资料组件：
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<button @click="updateName">Update Name</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const user = reactive({
name: '张三',
age: 25
});
const updateName = () => {
user.name = '李四';
};
return {
user,
updateName
};
}
};
</script>在这个例子中，我们使用了reactive来声明用户资料，因为用户资料是一个对象。
六、进阶之路：shallowReactive和shallowRef
除了reactive和ref之外，Vue 3还提供了shallowReactive和shallowRef。这两个函数的作用与reactive和ref类似，但是它们只进行浅层响应式处理。
shallowReactive： 只会将对象的第一层属性变成响应式的，而不会递归地处理嵌套对象。shallowRef： 与ref类似，但是它只追踪.value属性的引用，而不会追踪.value属性内部的值的变化。
使用场景：
shallowReactive和shallowRef通常用于性能优化。如果你知道某个对象或值的内部结构不会发生变化，或者你不需要追踪内部结构的变化，那么可以使用shallowReactive或shallowRef来减少响应式追踪的开销。
七、总结
reactive和ref是Vue 3中两个非常重要的API，它们分别用于将对象和原始类型的值变成响应式数据。理解它们的设计哲学和性能差异，可以帮助你更好地选择合适的API，提高开发效率和应用性能。
总而言之，reactive就像是一个“全自动”的响应式工厂，而ref则是一个“半自动”的响应式工具。根据你的需求，选择合适的工具，才能让你的代码更加优雅和高效。
今天的分享就到这里，希望对大家有所帮助！下次有机会再和大家聊聊Vue 3的其他有趣特性。 拜拜！