深层响应式递归追踪所有嵌套层级变化，浅层响应式仅监听顶层赋值；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 赋值或对象属性直接替换生效：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 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 的响应性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
