shallowref适用于大型只读数据集整体替换和第三方库实例封装两类场景，仅在.value被重新赋值时触发更新，内部属性修改无响应，可配合triggerref手动刷新。
shallowRef 用来创建一个只对 .value 本身赋值敏感的响应式引用，内部属性修改不触发更新。
什么时候该用 shallowRef
适合两类典型场景：
- 数据结构很深、但你只打算整体替换（比如换一整个用户对象），而不是频繁改其中某个字段
- 要包装一个第三方库实例（如 ECharts 图表对象、Monaco 编辑器、地图容器），避免 Vue 对其内部成千上万个属性做 Proxy 劫持导致卡顿或崩溃
基本写法和关键行为
用法和 ref 完全一样，只是响应范围不同：
const user = shallowRef({ name: 'Alice', profile: { avatar: '' } })这时只有下面的操作会触发视图更新：
- user.value = { name: 'Bob' } ✅（顶层替换）
- user.value.profile.avatar = 'new.png' ❌（深层修改，无响应）
和 ref 的核心区别
ref 会对传入的对象自动调用 reactive，变成深度响应；shallowRef 则跳过这一步，保留原始对象结构：
- ref({ a: { b: 1 } }).value.a.b = 2 → 触发更新
- shallowRef({ a: { b: 1 } }).value.a.b = 2 → 完全静默，不更新也不报错
配合 triggerRef 手动通知更新
如果你确实改了深层属性，又希望强制刷新，可以调用 triggerRef：
user.value.profile.avatar = 'updated.png'triggerRef(user)
这相当于告诉 Vue：“虽然我没监听这个字段，但请你重新渲染一次”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
