shallowRef 仅对 .value 层级响应，适用于大型静态数据整体替换场景；内部修改需手动 triggerRef，否则不触发更新。
直接用 shallowRef 替换 ref，但只在“数据很大、内部属性基本不需响应式更新”的场景下才有效。它不是万能加速器，而是精准控制响应式边界的工具。
什么时候该换 shallowRef
核心判断标准：你是否只关心这个对象被整体替换（比如重新赋值），而不是它内部某个字段的修改？
- 表格渲染上万行数据，但用户只做全量刷新或分页切换，不频繁改单条记录的 status、updatedAt 等字段
- 从地图 SDK 或 Three.js 拿到一个巨型坐标数组或几何体对象，你只把它当静态数据传给组件，不监听其内部顶点变化
- 缓存服务返回的完整 JSON 数据包，结构深、字段多，但业务逻辑只读取 summary 字段或按需重拉整包
怎么写才真正生效
关键不在声明，而在后续操作方式。shallowRef 的响应式只挂在 .value 这一层。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- ✅ 正确触发更新：
data.value = newData—— 整个对象被替换，视图重渲染 - ❌ 不会触发更新：
data.value.items[0].status = 'done'—— 内部字段改了，但响应式系统完全不感知 - ⚠️ 必须配
triggerRef：data.value.items.forEach(...); triggerRef(data)—— 批量改完再手动通知一次，比每改一条都触发高效得多
容易踩的坑
shallowRef 不是“关掉响应式”，而是“收窄响应式范围”。误用会导致视图卡在旧状态。
- 把 shallowRef 当成普通对象直接改深层属性，又忘了调
triggerRef，结果 UI 完全不更新 - 在模板里直接访问
item.name，但 item 是 shallowRef.value 里的子项 —— 它本身没被 reactive 处理，改了也不会刷新对应那一行 - 和
computed混用时出问题：比如computed(() => shallowData.value.count)能响应，但computed(() => shallowData.value.list[0].id)就不会随 list[0].id 变化
搭配 triggerRef 的典型流程
适合需要局部修改 + 统一刷新的场景，比如后台批量处理后同步状态。
- 用
shallowRef存大型列表 - 循环遍历修改每项的多个字段（如
item.checked = true、item.updatedAt = Date.now()） - 全部改完，只调一次
triggerRef(listRef) - 组件内 watchEffect 或 computed 会收到通知，执行一次更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
