深入理解 Vue 3 中的 toRaw(), markRaw(), shallowRef(), shallowReactive() 等 API 的作用和使用场景。

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们聊聊 Vue 3 里面那些听起来有点神秘，但其实超级实用的 API，也就是 toRaw(), markRaw(), shallowRef(), 和 shallowReactive()。

别担心，咱们不用啃文档，我保证用最接地气的方式，让你们彻底搞懂这些家伙到底干啥的，以及啥时候该用它们。

开场白：响应式系统的“潜规则”

在开始之前，咱们先简单回顾一下 Vue 的响应式系统。简单来说，Vue 会“劫持”你的数据，让数据发生变化的时候，自动更新视图。这个“劫持”的过程，其实就是把你的普通 JavaScript 对象变成一个“响应式对象”。这个过程很强大，但有时候也会带来一些性能上的问题，或者一些意想不到的副作用。

这时候，我们今天的主角们就登场了，它们就像是响应式系统的“后门”，让我们可以在某些情况下绕过或者控制响应式系统，从而获得更高的性能或者更灵活的控制。

第一位嘉宾：toRaw() – “还我本来面目！”

toRaw() 的作用很简单粗暴，就是把一个响应式对象（包括 reactive 创建的响应式对象、ref 创建的响应式对象的 .value，以及 readonly 创建的只读对象）还原成它最初的、未被响应式系统“污染”的普通 JavaScript 对象。

• 作用： 将响应式对象转换为原始对象。

• 使用场景：

  • 性能优化： 当你需要对一个对象进行大量的非响应式操作时，可以先用 toRaw() 转换成普通对象，操作完成后再更新响应式对象。这样可以避免不必要的响应式更新。
  • 与第三方库集成： 有些第三方库可能不兼容 Vue 的响应式对象，这时候可以用 toRaw() 转换成普通对象，再传递给第三方库。
  • 深层比较： 当你需要对两个响应式对象进行深层比较时，直接比较可能会因为响应式代理而导致错误的结果。可以用 toRaw() 转换成普通对象后再进行比较。

• 代码示例：

import { reactive, toRaw } from 'vue';

const rawObject = { name: '张三', age: 30 };
const reactiveObject = reactive(rawObject);

console.log(reactiveObject.name); // "张三"

// 将响应式对象转换为原始对象
const originalObject = toRaw(reactiveObject);

console.log(originalObject.name); // "张三"

// 修改原始对象，不会触发响应式更新
originalObject.name = '李四';
console.log(originalObject.name); // "李四"
console.log(reactiveObject.name); // "张三"

// 修改响应式对象，会触发响应式更新
reactiveObject.name = '王五';
console.log(originalObject.name); // "李四"
console.log(reactiveObject.name); // "王五"

• 注意事项：

  • toRaw() 返回的是原始对象的引用，而不是拷贝。也就是说，如果你修改了 toRaw() 返回的对象，可能会影响到原始对象。
  • 使用 toRaw() 转换后的对象，就失去了响应式能力。对它的修改不会触发视图更新。

第二位嘉宾：markRaw() – “你给我老实点，别搞事！”

markRaw() 的作用是给一个对象打上一个“禁止响应式化”的标签。被 markRaw() 标记的对象，永远不会被转换成响应式对象，即使你把它传递给 reactive() 或者 ref()。

• 作用： 将一个对象标记为不可响应式。

• 使用场景：

  • 性能优化： 当你确定某个对象永远不需要响应式更新时，可以用 markRaw() 标记它，避免 Vue 对它进行不必要的响应式处理。
  • 避免循环依赖： 有时候，响应式对象之间可能会形成循环依赖，导致性能问题甚至栈溢出。可以用 markRaw() 标记其中一个对象，打破循环依赖。
  • 与第三方库集成： 有些第三方库的对象可能包含一些内部状态，不希望被 Vue 的响应式系统干扰，可以用 markRaw() 标记它们。

• 代码示例：

import { reactive, markRaw } from 'vue';

const rawObject = { name: '张三', age: 30 };

// 标记对象为不可响应式
markRaw(rawObject);

const reactiveObject = reactive(rawObject);

// 修改原始对象，不会触发响应式更新
rawObject.name = '李四';
console.log(reactiveObject.name); // "张三"

// 修改响应式对象，也不会触发响应式更新 (因为原始对象已经被 markRaw 了)
reactiveObject.name = '王五';
console.log(rawObject.name); // "李四"
console.log(reactiveObject.name); // "张三"

• 注意事项：

  • markRaw() 是一个“深度”操作。也就是说，如果你用 markRaw() 标记了一个对象，那么这个对象的所有子对象也会被标记为不可响应式。
  • markRaw() 标记的对象，即使被传递给 reactive() 或者 ref()，也不会变成响应式对象。

第三位嘉宾：shallowRef() – “浅浅的爱，淡淡的愁！”

shallowRef() 和 ref() 类似，都是用来创建一个响应式引用的。但是，shallowRef() 只会对 .value 进行浅层响应式处理。也就是说，只有当你直接修改 .value 的时候，才会触发视图更新。如果 .value 是一个对象，修改对象的属性，不会触发视图更新。

• 作用： 创建一个浅层响应式引用。

• 使用场景：

  • 性能优化： 当你需要对一个大型对象进行响应式处理，但只需要监听对象整体的变化，而不需要监听对象内部属性的变化时，可以用 shallowRef()。
  • 与第三方库集成： 有些第三方库会返回一些复杂的数据结构，不希望 Vue 对这些数据结构进行深层响应式处理，可以用 shallowRef()。
  • 大型数据的局部更新： 假设你有一个很大的数组，只有当数组被完全替换时才需要更新视图，使用 shallowRef() 可以避免不必要的性能开销。

• 代码示例：

import { shallowRef, triggerRef } from 'vue';

const rawObject = { name: '张三', age: 30 };
const shallowRefObject = shallowRef(rawObject);

console.log(shallowRefObject.value.name); // "张三"

// 修改对象的属性，不会触发响应式更新
shallowRefObject.value.name = '李四';
console.log(shallowRefObject.value.name); // "李四"

// 替换整个对象，会触发响应式更新
shallowRefObject.value = { ...shallowRefObject.value }; // 或者 Object.assign({}, shallowRefObject.value)
console.log(shallowRefObject.value.name); // "李四"

// 强制触发更新
// triggerRef(shallowRefObject); // 有时候需要手动触发更新

import { shallowRef } from 'vue';

const shallowRefArray = shallowRef([1, 2, 3]);

// 修改数组的元素，不会触发响应式更新
shallowRefArray.value[0] = 4;
console.log(shallowRefArray.value); // [4, 2, 3]

// 替换整个数组，会触发响应式更新
shallowRefArray.value = [4, 2, 3]; // 即使内容相同，也会触发更新 (因为引用变了)
console.log(shallowRefArray.value); // [4, 2, 3]

• 注意事项：

  • shallowRef() 只会对 .value 进行浅层响应式处理。如果 .value 是一个对象，修改对象的属性，不会触发视图更新。
  • 如果需要手动触发更新，可以使用 triggerRef()。
  • 如果 .value 是一个原始类型（比如字符串、数字、布尔值），那么 shallowRef() 和 ref() 的行为是一样的。

第四位嘉宾：shallowReactive() – “只管表面，不管里面！”

shallowReactive() 和 reactive() 类似，都是用来创建一个响应式对象的。但是，shallowReactive() 只会对对象的第一层属性进行响应式处理。也就是说，只有当你直接修改对象的属性时，才会触发视图更新。如果属性值是一个对象，修改这个对象的属性，不会触发视图更新。

• 作用： 创建一个浅层响应式对象。

• 使用场景：

  • 性能优化： 当你需要对一个大型对象进行响应式处理，但只需要监听对象的第一层属性的变化，而不需要监听对象内部属性的变化时，可以用 shallowReactive()。
  • 与第三方库集成： 有些第三方库会返回一些复杂的数据结构，不希望 Vue 对这些数据结构进行深层响应式处理，可以用 shallowReactive()。
  • 状态管理： 在一些简单的状态管理场景下，可以使用 shallowReactive() 来管理状态，减少不必要的响应式处理。

• 代码示例：

import { shallowReactive } from 'vue';

const rawObject = { name: '张三', age: 30, address: { city: '北京' } };
const shallowReactiveObject = shallowReactive(rawObject);

console.log(shallowReactiveObject.name); // "张三"
console.log(shallowReactiveObject.address.city); // "北京"

// 修改对象的属性，会触发响应式更新
shallowReactiveObject.name = '李四';
console.log(shallowReactiveObject.name); // "李四"

// 修改嵌套对象的属性，不会触发响应式更新
shallowReactiveObject.address.city = '上海';
console.log(shallowReactiveObject.address.city); // "上海"

• 注意事项：

  • shallowReactive() 只会对对象的第一层属性进行响应式处理。如果属性值是一个对象，修改这个对象的属性，不会触发视图更新。
  • shallowReactive() 创建的对象，不能被传递给 reactive() 或者 ref()。

总结：选择适合你的“武器”

现在，我们已经认识了这四位嘉宾，也了解了它们各自的特点和使用场景。那么，在实际开发中，我们应该如何选择呢？

API	作用	适用场景	注意事项
toRaw()	将响应式对象转换为原始对象	1. 性能优化：对响应式对象进行大量非响应式操作时。2. 与第三方库集成：第三方库不兼容 Vue 响应式对象。3. 深层比较：对响应式对象进行深层比较。	返回的是原始对象的引用，修改会影响原始对象；转换后的对象失去响应式能力。
markRaw()	将一个对象标记为不可响应式	1. 性能优化：确定对象永远不需要响应式更新时。2. 避免循环依赖：打破响应式对象之间的循环依赖。3. 与第三方库集成：第三方库的对象包含内部状态，不希望被 Vue 的响应式系统干扰。	深度操作，所有子对象也会被标记为不可响应式；标记的对象即使传递给 reactive() 或 ref() 也不会变成响应式对象。
shallowRef()	创建一个浅层响应式引用	1. 性能优化：只需要监听对象整体的变化，而不需要监听对象内部属性的变化时。2. 与第三方库集成：第三方库返回复杂数据结构，不希望进行深层响应式处理。3. 大型数据的局部更新：只有当数组被完全替换时才需要更新视图。	只会对 .value 进行浅层响应式处理，修改对象的属性不会触发视图更新；如果需要手动触发更新，可以使用 triggerRef()；如果 .value 是原始类型，则行为与 ref() 相同。
shallowReactive()	创建一个浅层响应式对象	1. 性能优化：只需要监听对象的第一层属性的变化，而不需要监听对象内部属性的变化时。2. 与第三方库集成：第三方库返回复杂数据结构，不希望进行深层响应式处理。3. 状态管理：在一些简单的状态管理场景下，可以使用 shallowReactive() 来管理状态。	只会对对象的第一层属性进行响应式处理，修改嵌套对象的属性不会触发视图更新；创建的对象不能被传递给 reactive() 或 ref()。

总而言之，选择哪个 API，取决于你的具体需求。如果你需要更高的性能，或者更灵活的控制，那么这些 API 绝对是你的得力助手。

温馨提示：

• 不要滥用这些 API。在大多数情况下，默认的 reactive() 和 ref() 已经足够满足需求。只有在真正需要的时候，才考虑使用这些“高级” API。
• 在使用这些 API 的时候，一定要仔细阅读文档，了解它们的特性和限制，避免踩坑。
• 多做实验，多练习，才能真正掌握这些 API 的用法。

好了，今天的讲座就到这里。希望大家能够有所收获，在 Vue 3 的世界里玩得开心！有问题随时提问，我们下期再见！