深层响应式递归追踪所有嵌套层级变化，浅层响应式仅监听顶层赋值；ref/reactive默认深层，shallowRef/shallowReactive仅顶层响应，选型取决于是否需内部变更触发更新及性能敏感度。

深层响应式会递归追踪对象所有嵌套层级的变化，而浅层响应式只监听顶层属性的赋值操作。选哪种，关键看数据结构是否需要内部变更触发更新，以及性能是否敏感。

深层响应式：自动穿透每一层

ref 和 reactive 默认就是深层响应式。只要数据被包裹，Vue 就会用 Proxy 一层层代理下去，直到原始类型为止。比如：

• 修改嵌套属性会触发更新：state.user.profile.name = 'Alice' → 视图重绘
• 新增或删除属性也受监控：Vue 会拦截 Object.defineProperty 或 Proxy 的 set/delete 操作
• watch 默认不深度监听 ref 对象，但组件模板和 computed 仍能响应内部变化 —— 这是渲染层的自动解包机制，和 watch 行为不同

浅层响应式：只守大门，不管屋里

shallowRef 和 shallowReactive 不做递归代理，只对顶层 .value 赋值或对象属性直接替换生效：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• shallowRef({ a: 1, b: { c: 2 } })：改 shallowRef.value = { a: 2 } → 响应；改 shallowRef.value.b.c = 3 → 完全静默
• shallowReactive({ x: 1, y: { z: 2 } })：改 obj.x = 5 → 响应；改 obj.y.z = 10 → 不响应；但 obj.y = { z: 10 } → 响应（因为 y 是顶层键）
• 不会自动解包 ref 属性：在 shallowReactive 对象里存一个 ref，访问时拿到的是 ref 本身，不是它的 .value

怎么选？看场景再决定

不是“越深越好”，也不是“越浅越快”，而是匹配实际需求：

立即学习“前端免费学习笔记（深入）”；

• 用深层响应式：表单字段联动、用户配置实时预览、嵌套状态频繁读写且需同步视图
• 用浅层响应式：大型 JSON 数据展示（如日志列表、树形结构）、第三方库返回的对象（axios response.data）、游戏帧状态、图表原始数据源 —— 这些你只关心整体替换，不希望 Vue 为每个子字段建依赖
• 混合使用更常见：顶层用 shallowRef 存大数据，内部关键字段用 ref 单独管理；或者用 reactive 包主体，对其中某个大字段用 shallowRef 隔离

别忽略的细节

浅响应不是“禁用响应式”，而是缩小作用域。它依然参与依赖收集和更新通知，只是范围限定在顶层：

• triggerRef 可手动刷新 shallowRef：当你内部改了值又不想替换整个 .value 时，调用 triggerRef(shallowRef) 强制通知
• isReactive / isShallow 判断类型：调试时可用这两个工具函数确认当前对象是否被浅代理
• readonly + shallow 组合防误改：shallowReadonly({ a: ref(1), b: {} }) 既限制顶层修改，又保留 ref 的响应性