Vue 3 中应对大型嵌套对象响应式性能问题的四大策略：①用 shallowReactive 截断无用层级；②按需对关键字段用 ref/computed 激活深层响应；③批量更新优先用 Object.assign；④纯展示数据用 readonly + markRaw 隔离。
Vue 3 的 reactive 默认会对传入对象进行**递归响应式代理**，遇到大型嵌套对象（如含数百节点的树、万级表格数据、多层配置结构）时，直接使用它会引发明显性能问题——不是数据“不能更新”，而是更新过程被过度追踪、扩散和放大。关键不在“怎么更新”，而在“是否需要全量响应”。
避免默认深层代理：用 shallowReactive 截断无用层级
如果你只关心列表整体增删（比如用户管理页的表格行添加/删除），但不监听每条记录内部字段变化，就该用 shallowReactive：
- 它只代理第一层（数组本身或顶层对象），跳过所有嵌套属性的 Proxy 创建
- 适合存储原始接口返回的静态结构、菜单配置、树形数据源等“读多写少”的场景
- 示例：
const treeData = shallowReactive(rawApiResponse)，后续访问treeData.nodes[0].label不会触发依赖收集
按需激活深层响应：对真正要监听的字段单独提取
不必让整个大对象都进响应式系统。把需要动态更新的字段（如表单输入项、开关状态）拆出来，用 ref 或 computed 管理：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 例如一个含 50 个字段的用户编辑表单，只有
name、email、status需实时校验，其余为只读展示，则只对这三个字段做响应式 - 可用
toRefs拆解后，再对特定字段包装为ref，或用computed做派生 - 这样既保留模板中自然访问（
{{ name }}），又避免了整棵树被代理
批量更新时优先用 Object.assign，而非逐个赋值
当从接口获取新数据并覆盖整个对象时，用 Object.assign 是更高效、更安全的方式：
立即学习“前端免费学习笔记（深入）”；
- 它一次性触发一次响应式更新，而不是每个属性变更都走一遍 set + trigger 流程
- 不会丢失响应性（
reactive对象的代理关系仍保留） - 注意：仅适用于同结构覆盖；若新旧结构差异大（如新增字段、删减嵌套层），建议配合
shallowRef+markRaw控制初始化开销
冻结纯展示型嵌套数据：readonly + markRaw 双保险
对于完全不需要响应式的子结构（如用户档案中的 address、companyInfo），应主动隔离：
- 用
readonly包裹，禁止修改的同时也阻止 Vue 进一步代理其内部 - 再配合
markRaw标记原始对象，确保即使父级用reactive，也不会递归处理它 - 示例：
address: readonly(markRaw(apiResponse.address))
