shallowRef 与 ref 的区别、场景与坑位

结论先行：

• ref
  会深度地把你放进去的对象转成响应式（递归代理），因此"对象内部的改动"也会触发视图更新。
• shallowRef 只在顶层做依赖追踪：更换 .value
  才触发更新；若你只是"在原对象上改属性"，不会触发，除非手动
  triggerRef()。

#1. 快速对比

维度 ref shallowRef

追踪粒度 深度（递归） 仅顶层

对象内部属性变更 会触发更新 不会触发（除非 triggerRef 或重新赋值）

性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例

适用对象 普通标量、普通对象、数组 第三方实例（图表、播放器、地图）、大数据快照、不可/少变对象

#搭配工具 ------ triggerRef(ref) 常用；也可配合 markRaw

#2. 它们到底"深/浅"在哪？

#2.1 ref 的深度响应式

复制import { ref } from 'vue'

const user = ref({ name: 'Tom', info: { age: 18 } })

user.value.name = 'Jerry'      // ✅ 触发更新
user.value.info.age++          // ✅ 深层属性也会触发更新

#2.2 shallowRef 的顶层追踪

复制import { shallowRef, triggerRef } from 'vue'

const user = shallowRef({ name: 'Tom', info: { age: 18 } })

user.value.name = 'Jerry'      // ❌ 默认不触发更新
triggerRef(user)               // ✅ 手动触发一次依赖更新

user.value = { ...user.value, name: 'Jerry' }  // ✅ 重新赋值会触发

#3. 什么时候用 shallowRef 更香？

1. 第三方库的实例
2. 大对象/大数组的只读快照
3. 与 markRaw 搭配，避免深度代理
4. 手动刷新（细控渲染时机）

#4. 常见坑与修复手法

• 改内部属性不更新 → 用整体替换或 triggerRef
• 数组 push 不触发 → 用新引用替换
• watch/computed 只触发引用变化
• 模板中内部改属性不刷新

#5. 与 reactive / shallowReactive / markRaw 的关系

• reactive(obj)：深度代理对象
• shallowReactive(obj)：只代理第一层属性
• ref(obj)：包成容器并深度代理
• shallowRef(obj)：包成容器但不深度代理
• markRaw(obj)：完全不代理

#6. 性能与建议

• 默认用 ref
• 大对象、第三方实例用 shallowRef
• 遵守不可变数据思维
• 用 markRaw 管理重量级实例

#7. 代码模板

#图表实例

复制import { shallowRef, markRaw, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const el = shallowRef<HTMLElement | null>(null)
const chart = shallowRef<echarts.ECharts | null>(null)

onMounted(() => {
  if (el.value) chart.value = markRaw(echarts.init(el.value))
})

onBeforeUnmount(() => {
  chart.value?.dispose()
  chart.value = null
})

#大数组不可变替换

复制const list = shallowRef<any[]>([])
list.value = [...list.value, item]

#8. FAQ

• 模板会自动解包 .value
• shallowRef 内存更轻
• 只在必要时使用 triggerRef
• markRaw 常与 shallowRef 配合

#9. 实战选型清单

• 普通状态 → ref / reactive
• 大列表数据 → shallowRef
• 第三方实例 → shallowRef + markRaw
• 混合结构 → shallowReactive + markRaw