vue3-响应式 shallowRef
在Vue 3中，shallowRef是Composition API的一部分，它用于创建一个只追踪其.value属性顶层变化的响应式引用。与reactive不同，shallowRef不会使其内部对象的属性也变成响应式的；它只关注.value这个属性的变化。
使用场景
shallowRef在你想要一个响应式引用，但又不希望Vue去深度追踪其内部对象的变化时非常有用。这在你处理大型对象或嵌套对象时特别有用，因为深度追踪可能会带来性能开销。
基本用法
import { shallowRef } from 'vue';
const obj = {
foo: 'bar',
nested: {
prop: 'value'
}
};
const shallow = shallowRef(obj);在这个例子中，shallow.value是一个响应式引用，指向obj对象。但是，只有当你改变shallow.value本身（即指向一个新的对象）时，Vue才会触发更新。如果你改变shallow.value.foo或shallow.value.nested.prop，Vue不会检测到这些变化，因为这些内部属性的变化没有被追踪。
注意事项
shallowRef只追踪.value属性的变化，而不追踪其内部对象的变化。- 如果你需要追踪内部对象的变化，应该使用
reactive而不是shallowRef。 shallowRef在性能优化方面很有用，特别是当你处理大型或深层嵌套的对象时。
总结
shallowRef是Vue 3中处理大型或深层嵌套对象时的一个有用工具，它允许你创建一个只追踪顶层变化的响应式引用，从而避免了不必要的性能开销。但是，你需要谨慎使用它，确保你了解它的工作原理和限制。