Vue3中shallowRef、shallowReactive

通过使用 shallowRef()和 shallowReactive() 来绕开深度响应，浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

以上是官方的解释

通俗点说就是第一层的数据才是响应式，深层次的数据不在是响应式

<script setup lang="ts">
import {shallowRef, shallowReactive} from 'vue'

let state = shallowReactive({
  name: '张三',
  child: {
    age: 18
  }
})
state.name = '李四' // 是响应式，页面会变
state.child = {age:19} // 是响应式，页面会变
state.child.age = 20 // 不是响应式，页面不会变


let state2 = shallowRef({
  vehicle: '小米汽车su7',
  options: {
    color: "蓝色"
  }
})
state2.value.vehicle = '小米汽车mi8' // 不是响应式，页面不会变
state2.value.options.color = '紫色' // 不是响应式，页面不会变

let state3 = shallowRef("华为") 
state3.value = "小米"  // 是响应式，页面会变
</script>