前言
最近团队的工作相对较少，我决定利用闲暇时间对代码进行审查和优化。在此过程中，我发现了一个令我惊讶的现象：在项目中 99% 的响应式变量声明都使用了 Ref 或 Reactive。虽然这两个 API 在大多数场景下都能满足需求，但在某些特定场景下，它们可能并非最佳选择。为了提升代码质量和性能，我们可以针对这些特殊场景进行优化。

优化场景
比如：在处理庞大数据集或嵌套对象时，我们往往只需对特定属性进行响应式处理，而无需将整个对象转换为响应式。这个时候如果你死磕 Ref、Reactive 虽然也能实现功能，但是会触发大量不必要的响应式转换和更新，试想一下，如果数据量足够的庞大，势必会造成很大的性能开销问题。

为了解决这个问题，向大家推荐 Vue3 中的两个实用 API：shallowRef 和 shallowReactive。这两个方法在处理响应式数据时，为我们提供了更好的灵活性和性能。在 Vue3 中，shallowRef 和 shallowReactive 是两个非常有用的方法，它们帮助我们在处理响应式数据时更加灵活和高效

shallowRef：
用于创建一个只追踪引用的响应式引用。当你只需要对一个对象的某个属性进行响应式处理时，shallowRef 是一个很好的选择。这样，Vue3 只会追踪该属性的变化，而不对整个对象进行深度响应式处理，从而降低性能开销。

shallowReactive：
与 shallowRef 类似，但适用于对象。当你需要对一个大对象的某个属性进行响应式处理时，可以使用 shallowReactive。这可以确保 Vue3 只对该属性进行响应式追踪，而不影响整个对象。通过使用 shallowRef 和 shallowReactive，我们可以在处理大量数据或嵌套对象时，实现更加高效且灵活的响应式处理，从而提高应用程序的性能。

shallowRef 使用场景
shallowRef 是一个创建响应式对象的函数，与 ref 不同之处在于，shallowRef 只会在对象的外层进行响应式处理（只有对 .value 的访问是响应式的）。这意味着当对象的深层属性发生变化时，不会触发视图更新，从而提高了性能。

import { shallowRef } from 'vue';

const user = shallowRef({
  name: 'xy',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
});

// 修改深层属性，不会触发视图更新
user.value.address.city = 'Japan';
// 修改深层属性，不会触发视图更新
user.value.name = '前端开发爱好者'
// 堆代码 duidaima.com
// 对 .value 的访问会触发试图更新
user.value = {
  name: '前端开发爱好者',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
};

shallowReactive 使用场景
与 shallowRef 类似，shallowReactive 用于创建一个浅层响应式的对象。与 reactive 不同，shallowReactive 只会对对象的第一层属性进行响应式处理，不会递归地将对象内部的属性都变成响应式。

import { shallowReactive } from 'vue';

const user = shallowReactive({
  name: 'xy',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
});

// 修改深层属性，不会触发视图更新
user.address.city = 'Japan';
// 修改浅层属性，会触发视图更新
user.name = '堆代码'

优势
性能优化：在处理大型数据集或嵌套对象时，运用 shallowRef 类似，shallowReactive 可有效提升性能，防止不必要的响应式转换及更新操作。
避免无限循环：当数据模型存在相互引用关系时，shallowRef 类似，shallowReactive 能助你规避创建无限循环的响应式数据结构。
更精细的控制：若只需关注对象的第一层属性，并避免触发深层次更新，shallowRef 类似，shallowReactive 可提供更为精细的控制能力。

shallowRef 类似，shallowReactive 的性能优势在于避免了深层对象的递归侦听，进而降低了响应式系统触发的频率。这对大型项目和复杂数据结构而言极具价值。

深入了解它们的使用方法和性能优势，可让我们更好地运用 Vue3 的响应式系统。请始终牢记，在利用这些特性时，需根据具体场景平衡性能与开发便利性，确保代码保持简洁、易读及易于维护。