大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义

shallowRef() shallowRef()是一个用于创建浅层响应式引用的函数。它创建一个响应式数据，但只对顶层属性进行响应式处理。 特点： 只跟踪引用值的变化，不关心值内部的属性变化。 <template><div>{{ shallowRefObj }}</div><button @click="changeShallowRefObj">直接修改shallowRefObj</butt

除了之前的  ref与reactive  之外，Vue3 还准备了另外两个API，也是用来对响应式数据做处理，那就是 shallowReactive 与 shallowRef shallowReactive 文档解释：reactive() 的浅层作用形式，只能定义对象类型的数据。和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。属性的

shallowReactive 作用：与reactive作用类似，但只处理对象最外层属性的响应式（浅响应式）使用场景：如果有一个对象数据，结构比较深（内嵌多层对象），但只需要最外层的属性进行响应式，则使用shallowReactive shallowRef 作用：与ref作用类型，但只处理基本数据类型的响应式，不处理对象类的响应式使用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，

shallowReactive 作用：与reactive作用类似，但只处理对象最外层属性的响应式（浅响应式）使用场景：如果有一个对象数据，结构比较深（内嵌多层对象），但只需要最外层的属性进行响应式，则使用shallowReactive shallowRef 作用：与ref作用类型，但只处理基本数据类型的响应式，不处理对象类的响应式使用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，

一、ref、shallowRef、trigger ref支持所有类型 可以粗略理解为 ref = shallowRef + triggerRef 1、通过ref获取dom元素 <p ref="_ref">这是ref获取dom元素</p>import {ref,shallowRef, triggerRef} from 'vue'const _ref = ref()console.log(_re

一、ref、shallowRef、trigger ref支持所有类型 可以粗略理解为 ref = shallowRef + triggerRef 1、通过ref获取dom元素 <p ref="_ref">这是ref获取dom元素</p>import {ref,shallowRef, triggerRef} from 'vue'const _ref = ref()console.log(_re