vue3 性能优化 之 shallowRef函数, 你还在用 ref吗?

362 阅读1分钟

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+ 个属性时,才会变得比较明显。因此,它只会影响少数特定的场景。