浅响应式数据（Shallow Reactive 和 Shallow Ref）

在Vue 3中，shallowReactive 和 shallowRef 是用于创建浅响应式数据的工具。它们与普通的 reactive 和 ref 不同，只对对象的第一层属性进行响应式处理，而不会递归地使嵌套对象的属性也变成响应式的。

1. shallowReactive
   问题： 当你有一个嵌套较深的对象，并且你只关心对象的第一层属性是否是响应式的，而不希望整个对象的所有嵌套属性都变成响应式的。

解决方案： 使用 shallowReactive 来创建一个浅响应式对象。

示例代码：

import { shallowReactive } from 'vue'

const state = shallowReactive({
  count: 0,
  nested: {
    deepCount: 100
  }
})
// 修改第一层属性会触发响应式更新
	state.count = 1

// 修改嵌套对象的属性不会触发响应式更新
	state.nested.deepCount = 200

2. shallowRef
   问题： 当你有一个对象，并且你只关心对象本身是否是响应式的，而不关心对象内部的属性是否是响应式的。

解决方案： 使用 shallowRef 来创建一个浅响应式引用。

示例代码：

import { shallowRef } from 'vue'

const state = shallowRef({
  count: 0,
  nested: {
    deepCount: 100
  }
})

// 修改对象本身会触发响应式更新
state.value = { count: 1, nested: { deepCount: 200 } }

// 修改对象内部的属性不会触发响应式更新
state.value.nested.deepCount = 300

总结：
shallowReactive 只对对象的第一层属性进行响应式处理，嵌套对象的属性不会变成响应式的。
shallowRef 只对对象本身进行响应式处理，对象内部的属性不会变成响应式的。