vue3之shallowRef

shallowRef 是 Vue 3 提供的一个数据引用函数，用于创建一个 ref 对象，但与普通的 ref 不同，shallowRef 仅在外部层次（浅层次）观察对象的变化，而不会递归观察对象内部的属性的变化。

这意味着，如果你将一个复杂的对象传递给 shallowRef，只有对象本身的引用变化时，shallowRef 才会触发更新，而不会深入到对象内部属性的变化。这可以在某些情况下提高性能，并减少不必要的更新。

以下是一个示例，说明了 shallowRef 的使用：

import { shallowRef } from 'vue';

const person = {
  name: 'John',
  age: 30,
};

const shallowPerson = shallowRef(person);

console.log(shallowPerson.value); // { name: 'John', age: 30 }

// 此时更新对象属性
shallowPerson.value.name = 'Alice';

console.log(shallowPerson.value); // { name: 'Alice', age: 30 }

// 但是如果替换整个对象，而不是更新属性，仍然会触发更新
shallowPerson.value = {
  name: 'Bob',
  age: 25,
};

console.log(shallowPerson.value); // { name: 'Bob', age: 25 }

注意，在上述示例中，当直接替换整个对象时，shallowRef 仍会触发更新，但如果只是更新对象内部属性，不会触发更新。这在某些情况下可以帮助优化性能，特别是当你处理大型对象时，不希望每次属性变化都触发组件的重新渲染。