shallowref比ref性能更轻量，因其仅代理.value顶层，不递归劫持嵌套属性；ref对大型对象需深度proxy处理，初始化耗时高、cpu占用大，而shallowref内存降90%以上、实例化近乎瞬时。
shallowRef 比 ref 在性能上明显更轻量，核心差异在于是否做递归代理。
响应式代理范围不同
ref 对传入的对象会执行深度 Proxy 劫持：遍历所有嵌套属性，为每一层都创建 getter/setter。遇到含 10 万条记录的数组或 ECharts 实例这类复杂对象时，初始化阶段就要同步处理成千上万个内部字段，CPU 占用高、主线程卡顿明显。
shallowRef 只代理 .value 这一层：不深入对象内部，不递归包裹子属性。它把原始对象原样保存，仅监听 .value 的重新赋值动作。内存占用通常能降低 90% 以上，实例化耗时趋近于零。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
初始化与更新开销对比
- ref 初始化一个大型对象（如 5000 行表格数据）可能需要 80–200ms，期间页面无响应
- shallowRef 同样对象的初始化几乎瞬时完成（
- ref 修改任意深层字段（如 data.list[123].status）都会走响应式触发链，有固定开销
- shallowRef 修改深层字段完全不触发更新，只有 data.value = newData 才激活依赖收集
典型性能敏感场景
这些情况用 shallowRef 能避免卡顿和内存暴涨：
- 只读型大数据集：审计日志、导出报表、历史快照（10 万+ 条静态记录）
- 第三方重型实例：Three.js Scene、MapLibreGL 地图、Monaco 编辑器、ECharts 实例
- 频繁替换但极少修改内部结构的数据：分页列表每次 fetch 后整体替换 data.value
补充说明：triggerRef 是性能兜底手段
如果确实需要修改 shallowRef 内部属性并触发更新，不用切回 ref —— 直接调用 triggerRef(ref) 即可手动刷新依赖。它绕过 Proxy 检测，开销极低，适合“偶发深层变更 + 主动控制更新时机”的混合场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
