shallowRef适用于大型只读数据集、第三方库实例、DOM/原生对象及需手动控制更新的场景，避免深度响应式开销，仅在.value被重新赋值时触发更新。
处理大型只读数据集
当从接口获取城市列表、字典项或配置 JSON 时，这些数据通常不会在运行时修改字段，只会在刷新或切换时整体替换。用 ref 包裹会为每个嵌套属性创建 Proxy，白白消耗内存和初始化时间；shallowRef 只监听 .value 是否被重新赋值，访问 .value.cityList[0].name 得到的是原始对象，无响应式开销。
持有第三方库实例
CanvasRenderingContext2D、ECharts 实例、Three.js 场景对象等，自身已有完整状态管理机制。Vue 对它们做深度响应式代理不仅无效，还可能干扰生命周期或引发警告。shallowRef 安全包裹后，可直接调用 ctx.value.fillRect() 或 chart.value.setOption()，仅在你主动替换整个实例时触发视图更新。
管理 DOM 元素或原生对象
原生 DOM 节点、Map、Set、FileList 等非 plain object 类型，ref 会尝试递归转换并报错或静默失败。shallowRef 不做任何转换，仅让 .value 的赋值/读取响应。例如缓存 canvas.getContext('2d') 后，在模板中直接使用 canvasCtx.value.moveTo()，完全绕过响应式系统干扰。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
需要手动控制更新时机的场景
对大数据表格做局部编辑（如修改某行 status 字段）时，不希望每次赋值都触发全量重渲染。shallowRef 默认不响应内部变更，配合 triggerRef 可实现“批量改完再统一刷新”：先遍历修改 tableData.value[i].status = 'done'，最后调用 triggerRef(tableData)，性能更可控。
立即学习“前端免费学习笔记（深入）”；
