Vue3 shallowRef 处理大数据时怎么避免深度追踪性能问题？

Question

仓乃文 · Accepted Answer

ref 对内部值做深度响应式转换，处理大型对象（如 API 返回的复杂嵌套数据）时会产生大量 Proxy 代理，导致性能下降。shallowRef 只追踪 .value 本身的变化，不做深度转换，适合大数据场景。

基本用法：
```javascript
import { shallowRef } from "vue";
const bigData = shallowRef({
  layers: Array(1000).fill(null).map(() => ({ data: "..." }))
});
bigData.value.layers[0].data = "changed";  // 不会触发更新
bigData.value = { ...bigData.value };  // 替换整个 .value 才触发更新
```

配合 triggerRef 手动触发：
```javascript
import { shallowRef, triggerRef } from "vue";
const list = shallowRef([]);
list.value.push(newItem);  // 修改内部不触发
triggerRef(list);  // 手动触发更新
```

补充说明：
- shallowRef 的 .value 访问是响应式的，但内部属性修改不会触发视图更新
- 适合 API 返回的大对象、第三方库实例、DOM 元素引用等不需要深度监听的场景
- 如果需要修改内部属性并触发更新，用 triggerRef 或整体替换 .value
- shallowReactive 同理，只有根级属性是响应式的