shallowRef用于避免大型对象深层响应式追踪以降低内存开销和依赖收集成本；适用于数据只整体替换、结构深且属性多、v-for渲染时无需监听内部变化的场景。
shallowRef 主要用于避免对大型对象进行深层响应式追踪，从而减少内存开销和依赖收集成本。它本身不直接优化“渲染”，但能显著降低大数据量场景下的响应式系统压力，间接提升页面性能。
什么时候该用 shallowRef？
当你有一个体积大、结构深、但实际只在整体替换时才需要触发更新的数据（比如上万行的表格原始数据数组、大型 JSON 配置、富文本内容树），且你不希望 Vue 对其内部每个属性做响应式处理时，shallowRef 就很合适。
- 数据只读或整块替换（如
list.value = newList），不频繁修改内部字段 - 数据结构嵌套深、属性极多（如
{items: [{id:1,meta:{...},data:[...]}, ...]}） - 使用
v-for渲染时，仅靠索引/键控制更新，不需要响应式监听 item 内部变化
对比 ref 和 shallowRef 的关键差异
ref(value)：会对 value 执行 reactive(value)（如果是对象），递归转为响应式，建立完整依赖图。
shallowRef(value)：只让 .value 属性可被追踪，value 本身不转响应式——即使它是对象，其属性修改也不会触发视图更新。
例如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const list = shallowRef([{ id: 1, name: 'a' }])
list.value = [{ id: 2, name: 'b' }] // ✅ 触发更新
❌ 不会触发更新（内部修改）：
list.value[0].name = 'c' // ❌ 无响应，视图不刷新
配合 v-for 渲染大数据列表的实用写法
避免将整个大数据集用 ref 包裹，改用 shallowRef + 显式更新策略：
立即学习“前端免费学习笔记（深入）”；
- 用
shallowRef存储原始数据数组，确保初始化和替换高效 - 用
computed或useMemo（配合@vueuse/core）做分页、搜索、排序等派生计算，避免每次渲染都遍历全量数据 - 给
v-for添加:key（推荐用唯一 ID，而非索引），配合shallowRef可让 Vue 复用已有 DOM 节点 - 如需局部更新某一项（比如编辑后保存），仍应整条替换：
list.value = list.value.map(...)，而非直接改list.value[i].xxx
进阶技巧：shallowRef + toRaw + 自定义更新逻辑
当必须支持「部分更新」又不想全量响应式时，可结合 toRaw 绕过响应式访问原始数据，再手动调用 triggerRef 强制更新：
import { shallowRef, triggerRef, toRaw } from 'vue'
const rawData = shallowRef([
{ id: 1, count: 10 },
{ id: 2, count: 20 }
])
// 修改某一项（不触发响应）
const item = toRaw(rawData.value).find(i => i.id === 1)
if (item) item.count++
// 手动通知更新
triggerRef(rawData)
这种方式把更新控制权交还给开发者，适合对性能极度敏感、且更新逻辑明确的场景（如实时日志流、图表数据点追加）。
