带你全面理解vue3 浅层响应式API: shallowRef, shallowReactive, shallowReadonly

在Vue 3中，shallowRef、shallowReactive和shallowR是浅层响应式API的一部分。这些API允许我们创建响应式引用，但不会像ref和reactive那样跟踪嵌套对象属性的变化，即它们不会创建深层的响应式数据结构。

以下是shallowRef和shallowReactive的简单使用示例：

import { shallowRef, shallowReactive } from 'vue';
 
// 使用shallowRef
const shallowNumber = shallowRef(1);
shallowNumber.value++; // 可以直接修改.value
 
// 使用shallowReactive
const shallowObject = shallowReactive({
  count: 1,
  nested: {
    value: 'Nested'
  }
});
 
// 修改shallowObject的属性是响应式的
shallowObject.count++; 
 
// 修改嵌套的对象不会是响应式的
// 这不会触发视图更新
shallowObject.nested.value = 'New Nested';

在上面的例子中，shallowNumber是一个浅层响应式引用，它的值可以直接修改，不会有深层的响应式跟踪。shallowObject是一个浅层响应式对象，修改其顶层属性是响应式的，但是对嵌套对象nested的修改不会触发视图更新。