shallowref 和 shallowreactive 是 vue 3 中用于性能优化的浅层响应式工具，仅对顶层赋值触发更新，适用于 dom 引用、大对象整体替换及第三方库集成等场景。
shallowRef 和 shallowReactive 是 Vue 3 中专为性能敏感场景设计的浅层响应式工具，它们不递归处理嵌套结构，只在顶层变化时触发更新——这在大数据、第三方集成或 DOM 引用管理中能显著减少代理开销。
什么时候该用 shallowRef
它适合封装一个值（基本类型或对象），但你只关心这个值被整体替换，而不是内部改动。比如视频元素引用、大型配置对象、或第三方库返回的状态实例。
- DOM 元素引用：用 shallowRef(null) 存 ref，避免 Vue 对 DOM 节点做响应式代理（DOM 本身不可代理，但 deep ref 会尝试递归检查）
- 大对象整体切换：如主题配置、API 响应体，内部属性频繁修改但无需响应，仅当整个对象被新对象赋值时才刷新视图
- 配合 triggerRef() 主动通知更新：当你手动修改了
.value内部属性，可用它强制刷新依赖，避免遗漏
什么时候该用 shallowReactive
它适用于结构较深的对象，但你只监听第一层字段（如开关、状态码、选中 ID），而嵌套数据（如列表项详情、图表原始数据）不需要响应式追踪。
- 表格/列表状态管理：顶层有
selectedIds、loading、filter，但每条数据本身是纯 JSON，不需响应式 - 与 ECharts、Three.js 等库协作：传入的 options 或 scene 数据保持原生，避免 Vue 代理干扰其内部逻辑
- 表单顶层控制：比如
formState = shallowReactive({ valid: true, submitted: false })，内部字段由其他机制管理
和 ref / reactive 的关键区别
ref 和 reactive 默认深度响应——改任何嵌套属性都会更新视图；shallowRef 和 shallowReactive 则明确“止步于顶层”，这是主动取舍，不是缺陷。
-
shallowRef：只响应
.value = newValue，.value.xxx = y完全静默 -
shallowReactive：只响应
obj.key = v，obj.nested.prop = v不触发更新 - 两者都不支持对基本类型使用 shallowReactive（会静默失效），而 shallowRef 支持所有类型
- 内存占用更低、初始化更快，尤其在渲染万级列表或加载复杂配置时差异明显
实际搭配建议
别把它们当作“替代品”，而是当作“精准开关”：深层响应是默认安全策略，浅层响应是你主动声明“这里我来负责”。
- 先用 reactive/ref 快速开发，性能瓶颈出现后再针对性替换
- 第三方库文档若注明“请传入 plain object”，优先考虑 shallowReactive 或 markRaw
- 调试时注意：
isReactive(obj.nested)在 shallowReactive 下返回 false，这是预期行为 - 组合式函数对外暴露状态时，若内部含大型数据，用 shallowRef/shallowReactive 可避免调用方意外触发深度代理
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
