Vue 3.0 中的 shallowRef 与 shallReactive：探索响应式编程的细微差别

在 Vue 3.0 中，响应式编程是核心特性之一。它允许我们通过使用 ref() 函数轻松创建可响应的数据。但是，在某些情况下，我们需要对响应式处理进行更细致的控制。这就是 shallowRef 和 shallReactive 发挥作用的地方。

shallowRef

shallowRef 是一种特殊的 ref，它只处理基础数据类型的响应式。这意味着它可以使字符串、数字和布尔值等简单数据类型响应式。但是，如果我们尝试使一个对象或数组响应式，shallowRef 就会失败。

为什么 shallowRef 只处理基础数据类型的响应式？

这是因为如果我们给 ref 传入一个对象，底层会默认调用 reactive() 函数。reactive() 函数将对对象及其所有属性进行深度响应式处理。这可能会导致不必要的性能开销，尤其是在处理大型对象时。

shallReactive

另一方面，shallReactive 是一种函数，它可以使对象和数组响应式。它使用与 reactive() 函数相同的代理机制，但它不会递归遍历嵌套对象。这意味着它只使最顶层属性响应式。

何时使用 shallReactive？

如果您需要使对象或数组响应式，并且确信您不会更改其内部结构，则可以使用 shallReactive。这可以提高性能，并防止不必要的重新渲染。

示例

以下示例演示了 shallowRef 和 shallReactive 之间的区别：

const name = shallowRef('John');
const user = shallReactive({ name: 'John', age: 30 });

name.value = 'Jane'; // 触发重新渲染
user.name = 'Jane'; // 不触发重新渲染

console.log(name.value); // 'Jane'
console.log(user.name); // 'Jane'

在第一个示例中，当我们更改 name.value 时，触发了重新渲染。这是因为 shallowRef 只对基础数据类型进行响应式处理。

在第二个示例中，当我们更改 user.name 时，不会触发重新渲染。这是因为 shallReactive 只使最顶层属性响应式。

结论

shallowRef 和 shallReactive 是 Vue 3.0 中强大的工具，它们允许我们对响应式处理进行细致的控制。通过了解它们之间的区别，我们可以编写更有效和可维护的 Vue 应用程序。