各位观众老爷，大家好！我是今天的主讲人，代号“Bug终结者”。今天咱们聊聊Vue 3里两位轻量级选手：shallowReactive 和 shallowRef，看看它们是如何偷懒（哦不，优化！）的，在响应式这片战场上，用更少的资源打出漂亮的胜仗。
开场白：响应式英雄的负担
话说Vue的响应式系统，那可是它的灵魂所在。每当数据改变，视图就能自动更新，简直就是前端界的魔法。但是，这魔法也不是免费的。Vue 3 使用 Proxy 来实现响应式，对于深层嵌套的对象，需要递归地将所有层级的对象都变成响应式代理。
这就好比，你要给全公司的人发工资，如果公司组织结构是树状的，你得一层一层地把钱发下去，确保每个人都拿到。公司越大，组织结构越复杂，发钱的过程就越漫长，消耗的资源也越多。
对于大型应用来说，深层嵌套的对象结构很常见。如果一股脑地全部变成响应式，那内存占用和性能开销可不是闹着玩的。想象一下，一个几百层嵌套的JSON，每次修改都要触发一连串的 Proxy 操作，CPU都要哭了。
shallowReactive：浅尝辄止的响应式勇士
这时候，shallowReactive 就闪亮登场了！它就像一个只关心表面功夫的管家，只把对象的第一层属性变成响应式，深层嵌套的对象则保持原样。
import { shallowReactive, reactive } from 'vue';
// 普通 reactive
const deepReactiveData = reactive({
name: 'Deep Object',
address: {
city: 'Example City',
street: 'Main Street',
},
});
// shallowReactive
const shallowReactiveData = shallowReactive({
name: 'Shallow Object',
address: {
city: 'Example City',
street: 'Main Street',
},
});
// 修改第一层属性，两种方式都会触发响应式更新
deepReactiveData.name = 'Deep Object Updated'; // 触发更新
shallowReactiveData.name = 'Shallow Object Updated'; // 触发更新
// 修改深层属性，只有 reactive 会触发更新
deepReactiveData.address.city = 'Deep City Updated'; // 触发更新
shallowReactiveData.address.city = 'Shallow City Updated'; // 不触发更新
console.log(deepReactiveData.address.city); // Deep City Updated
console.log(shallowReactiveData.address.city); // Shallow City Updated在上面的代码中，deepReactiveData 是一个深层响应式对象，任何层级的属性修改都会触发更新。而 shallowReactiveData 只有第一层属性是响应式的，修改 address.city 不会触发视图更新。
shallowReactive 的原理：只代理第一层
shallowReactive 的实现非常巧妙，它并没有递归地遍历所有属性，而是只对对象的第一层属性进行 Proxy 代理。
简单来说，就是把对象的 get 和 set 操作拦截下来，然后通知 Vue 的响应式系统。但是，对于深层嵌套的对象，shallowReactive 就直接放过了，让它们保持原样。
shallowRef：只关注值的引用
接下来，我们再来看看 shallowRef。它和 ref 的区别在于，shallowRef 只追踪值的引用，如果值是一个对象，那么对象内部的属性变化不会触发更新。
import { shallowRef, ref } from 'vue';
// 普通 ref
const deepRefData = ref({
name: 'Deep Ref Object',
address: {
city: 'Example City',
street: 'Main Street',
},
});
// shallowRef
const shallowRefData = shallowRef({
name: 'Shallow Ref Object',
address: {
city: 'Example City',
street: 'Main Street',
},
});
// 替换整个对象，两种方式都会触发响应式更新
deepRefData.value = { name: 'New Deep Ref Object', address: { city: 'New City', street: 'New Street' } }; // 触发更新
shallowRefData.value = { name: 'New Shallow Ref Object', address: { city: 'New City', street: 'New Street' } }; // 触发更新
// 修改对象内部的属性，只有 ref 会触发更新
deepRefData.value.address.city = 'Deep Ref City Updated'; // 触发更新
shallowRefData.value.address.city = 'Shallow Ref City Updated'; // 不触发更新
console.log(deepRefData.value.address.city); // Deep Ref City Updated
console.log(shallowRefData.value.address.city); // Shallow Ref City Updated从代码中可以看出，deepRefData 内部对象的属性变化会触发更新，而 shallowRefData 则不会。只有当 shallowRefData.value 被赋予一个全新的对象时，才会触发更新。
shallowRef 的原理：只观察值的变化
shallowRef 的原理也很简单，它只观察 value 属性的变化。如果 value 是一个对象，那么 shallowRef 并不会递归地将对象变成响应式的，而是直接存储对象的引用。
当 value 发生变化时，shallowRef 会通知 Vue 的响应式系统。但是，如果 value 是一个对象，而对象内部的属性发生了变化，shallowRef 就不会有任何反应。
shallowReactive vs shallowRef：一字之差，天壤之别
虽然 shallowReactive 和 shallowRef 都被称为 "shallow"，但它们的用法和适用场景却有所不同。
| 特性 | shallowReactive |
shallowRef |
|---|---|---|
| 响应式深度 | 只对第一层属性进行响应式代理 | 只追踪值的引用，不对值内部的属性进行响应式代理 |
| 适用类型 | 对象 | 任意类型 |
| 触发更新的时机 | 第一层属性发生变化时 | 值的引用发生变化时 |
| 场景举例 | 大型表单，只关心表单数据的整体提交，不关心单个字段的实时更新 | 存储大型不可变数据，只需要在数据整体替换时触发更新 |
简单来说，shallowReactive 是一个 "浅" 响应式的对象，而 shallowRef 是一个 "浅" 响应式的值的引用。
应用场景：哪里需要 "浅" 响应式？
那么，在什么情况下我们需要使用 shallowReactive 和 shallowRef 呢？
-
大型表单： 当处理大型表单时，如果表单数据包含大量字段，并且只需要在提交时才进行验证和处理，那么可以使用
shallowReactive来避免不必要的响应式开销。 -
不可变数据： 当需要存储大型的不可变数据时，可以使用
shallowRef来避免对数据的深层代理。只有当数据整体替换时，才会触发更新。 -
性能优化： 当需要优化性能时，可以考虑使用
shallowReactive和shallowRef来减少响应式系统的负担。
代码示例：优化大型表单
<template>
<form @submit.prevent="handleSubmit">
<input v-model="formData.name" type="text">
<input v-model="formData.email" type="email">
<button type="submit">Submit</button>
</form>
</template>
<script>
import { shallowReactive } from 'vue';
export default {
setup() {
const formData = shallowReactive({
name: '',
email: '',
// ... 还有很多字段
});
const handleSubmit = () => {
// 提交表单数据
console.log(formData);
};
return {
formData,
handleSubmit,
};
},
};
</script>在这个例子中，formData 使用 shallowReactive 创建，只有在提交表单时才会真正关心数据的变化。在用户输入的过程中，Vue 不会进行不必要的响应式更新，从而提高了性能。
注意事项：shallowReactive 和 shallowRef 的坑
虽然 shallowReactive 和 shallowRef 可以帮助我们优化性能，但它们也有一些坑需要注意：
-
深层属性不会触发更新： 这是最需要注意的一点。如果需要对深层属性进行响应式更新，就不能使用
shallowReactive和shallowRef。 -
与
reactive和ref混用： 当shallowReactive和shallowRef与reactive和ref混用时，可能会出现一些意想不到的问题。需要仔细考虑数据的响应式需求，避免出现错误。 -
只适用于特定场景：
shallowReactive和shallowRef并不是万能的。它们只适用于特定的场景，如果滥用，可能会导致代码难以维护和调试。
总结：轻量级，但能力不凡
shallowReactive 和 shallowRef 是 Vue 3 中两个非常实用的工具。它们通过跳过深层嵌套对象的 Proxy 转换，来优化内存占用和响应式开销。虽然它们的功能不如 reactive 和 ref 强大，但在特定场景下，却能发挥巨大的作用。
希望今天的讲座能帮助大家更好地理解 shallowReactive 和 shallowRef，并在实际项目中灵活运用它们，写出更高效、更优雅的 Vue 代码。
Q&A环节
好，现在是答疑时间，大家有什么问题可以提出来，我将尽力解答。
Q1：shallowReactive 和 shallowRef 什么时候会更新视图？
A1：shallowReactive 会在第一层属性发生变化时更新视图。shallowRef 会在 value 属性被赋予新值时更新视图。注意，如果 value 是一个对象，对象内部的属性变化不会触发 shallowRef 的更新。
Q2：shallowReactive 可以嵌套使用吗？比如一个 shallowReactive 对象的属性也是一个 shallowReactive 对象？
A2：可以嵌套使用，但是要注意的是，只有最外层的 shallowReactive 对象的第一层属性是响应式的。内层的 shallowReactive 对象也是只对第一层属性进行响应式代理，更深层的属性仍然不会触发更新。
Q3：如果我需要监听一个深层对象的某个属性，但又不想让整个对象都变成响应式的，该怎么办？
A3：可以考虑使用 watch 监听深层对象的属性。watch 可以精确地监听某个属性的变化，而不需要将整个对象都变成响应式的。
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const data = ref({
name: 'Example',
address: {
city: 'Example City',
street: 'Main Street',
},
});
watch(
() => data.value.address.city, // 监听 data.value.address.city
(newCity, oldCity) => {
console.log(`City changed from ${oldCity} to ${newCity}`);
}
);
// 修改 city 属性，会触发 watch
data.value.address.city = 'New City';
return {
data,
};
},
};
</script>Q4：shallowReactive 和 shallowRef 对 TypeScript 的类型推断有什么影响？
A4：shallowReactive 和 shallowRef 会保留原始对象的类型信息。但是，由于它们只对部分属性进行响应式代理，因此在使用 TypeScript 时需要注意类型安全。例如，如果一个 shallowReactive 对象的属性是一个对象，并且你想要修改这个对象的内部属性，你需要手动进行类型断言，以避免 TypeScript 报错。
import { shallowReactive } from 'vue';
interface Address {
city: string;
street: string;
}
interface User {
name: string;
address: Address;
}
const user = shallowReactive<User>({
name: 'Example',
address: {
city: 'Example City',
street: 'Main Street',
},
});
// 修改 city 属性，需要进行类型断言
(user.address as Address).city = 'New City'; // 需要类型断言
console.log(user.address.city); // New City结束语
感谢大家的参与！希望今天的讲座对大家有所帮助。记住，shallowReactive 和 shallowRef 就像两把轻巧的匕首，用得好能四两拨千斤，用不好则会伤到自己。关键在于理解它们的原理和适用场景，并在实际项目中灵活运用。下次有机会再和大家分享更多Vue 3的技巧和知识！拜拜！