前言Vue3作为一款现代的JavaScript框架，引入了许多新的特性和改进，其中包括shallowRef和shallowReactive。这两个功能在Vue3中提供了更加灵活和高效的状态管理选项，尤其适用于大型和复杂的应用程序。Vue3的响应式系统Vue3引入了新的响应式系统，与Vue2相比，它具有更好的性能和更多的功能。这个新系统基于Proxy，为开发者提供了更直观、灵活的API，其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章写过有关响应式系统的解释，在本博客中，我们将深入探讨这两个API，并提供一些具体的例子，以便更好地理解它们的用法

深层次响应式reactive和ref创建的对象都是深层次的，对象的根属性和嵌套属性都是响应式的。深层次转换是递归地转为响应式，对象里的每个属性访问都将触发代理的依赖追踪，这种性能负担通常这只有在处理超大型数组或层级很深的对象时才比较明显。例如，一次渲染需要访问100000+个属性时，才会变得比较明显。因此，shallowRef或shalloReactive只在少数特定的场景才会使用。conststate=reactive({foo:{bar:1},foobar:2});浅层次响应式shallowReactiveshallowReactive创建的响应式对象只在其根属性是响应式的，对所有深层的对

深层次响应式reactive和ref创建的对象都是深层次的，对象的根属性和嵌套属性都是响应式的。深层次转换是递归地转为响应式，对象里的每个属性访问都将触发代理的依赖追踪，这种性能负担通常这只有在处理超大型数组或层级很深的对象时才比较明显。例如，一次渲染需要访问100000+个属性时，才会变得比较明显。因此，shallowRef或shalloReactive只在少数特定的场景才会使用。conststate=reactive({foo:{bar:1},foobar:2});浅层次响应式shallowReactiveshallowReactive创建的响应式对象只在其根属性是响应式的，对所有深层的对