shallowRef函数和 ref 函数的区别
shallowRef:内部值将会原样存储和暴露,并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的
// 不会触发更改
state.value.count = 2
// 会触发更改
state.value = { count: 2 }
ref:会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到。 将一个对象赋值给 ref,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref,它们将被深层地解包
// 会触发更改
state.value.count = 2
// 会触发更改
state.value = { count: 2 }
shallowRef:用于对大型数据结构的性能优化或是与外部的状态管理系统集成
ref:若要避免这种深层次的转换,请使用 shallowRef() 来替代。
Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观,但在数据量巨大时,深度响应性也会导致不小的性能负担,因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常只有在处理超大型数组或层级很深的对象时,例如一次渲染需要访问 100,000+ 个属性时,才会变得比较明显。因此,它只会影响少数特定的场景。