您现在的位置是：首页 >技术教程 >Vue3 性能优化之shallowReactive和shallowRef网站首页技术教程

Vue的响应式系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将出发代理的依赖追踪。好在这种性能负担通常只有在处理超大型数组或层级很深的对象时，例如：一次渲染需要访问100，000+个属性时，才会变得比较明显。因此，他只会影响少数特定的场景。

vue确实也为此提供了一种解决方案，通过使用 shallowRef() 和 shallowReactive（） 来绕开深度响应。

浅层式API（shallowRef 和 shallowReactive）创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，这使得对深层级属性的访问变得更快，但代价是，我们现在必须将所有深层级对象视为不可变的，并且只能通过替换整个根状态来触发更新：

接下来详细介绍下这两个浅层式AP：

shallowRef：

功能：创建一个浅层响应式引用，只对引用值的第一层数据变化进行响应式处理，不会递归追踪嵌套对象的变化

使用场景：

• 当处理复杂数据结构，但只关心顶层数据的变化时，使用 shallowRef 可以避免不需要的深层次响应式追踪
• 适用于需要优化性能的场景，尤其是当数据结构非常复杂或庞大时

const user = shallowRef({
  name: 'Alice',
  age: 30,
  address: {
    city: 'San Francisco',
    state: 'CA'
  }
});
user.value.name = 'Bob'; // 不触发响应式更新
user.value = { name: 'Bob', age: 35 }; // 触发响应式更新

shallowReactive：

功能：创建一个浅层响应式对象，只对对象的第一层属性进行响应式处理，不会递归的将嵌套对象的熟悉也变成响应式

使用场景：

• 当处理复杂嵌套对象时，但只关心对象的第一层属性变化，使用shallowReactive可以显著减少性能开销
• 避免对嵌套对象的深层次属性进行不必要的响应式追踪，从而优化性能

const user = shallowReactive({
  name: 'John',
  age: 25,
  address: {
    city: 'New York',
    country: 'USA'
  }
});
user.name = 'Jane'; // 触发响应式更新
user.address.city = 'Los Angeles'; // 不触发响应式更新

总结：

性能优化：shallowRef 和 shallowReactive 通过减少不必要的深度响应式追踪，显著提高了性能

使用场景：当不需要嵌套对象的深层次属性进行响应式处理时，使用它们可以避免不必要的性能开销

注意事项：如果需要对嵌套属性进行响应式处理，则应使用reactive 或 ref