Vue 3 响应式优化核心是避免无差别递归代理：用 shallowReactive 处理大型对象，仅代理顶层；对需响应的嵌套字段按需转 reactive；用 markRaw 跳过第三方实例等非响应数据；结合 toRefs + ref 管理解构后的响应性。
Vue 3 的 reactive 默认会对整个对象树做深度代理，遇到深层嵌套对象时，容易引发初始化慢、内存占用高、更新扩散等问题。优化核心思路是：**避免无差别递归代理，只在真正需要响应式追踪的地方启用深层响应**。
用 shallowReactive 替代 reactive 处理大型对象
当对象结构深但你只关心顶层属性变化（比如分页配置、状态开关、整体替换），用 shallowReactive 可以跳过所有嵌套属性的 Proxy 创建：
- 它只代理对象自身，内部属性（如
data.items[0].name）修改不会触发依赖更新 - 适合表格数据、配置项、API 响应体等“整体读写多、局部修改少”的场景
- 内存开销从 O(n) 降到 O(1)，初始化速度显著提升
对必须响应的嵌套字段，按需转为 reactive
如果部分子结构确实需要响应式（比如用户编辑某一行时才要监听其字段），可以延迟处理：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 初始用
shallowReactive包裹整个对象 - 当用户进入编辑模式时，仅对当前行调用
reactive(row) - 或用
toRef提取特定字段，再配合ref或computed管理局部响应逻辑
用 markRaw 跳过不需要响应式的子对象
某些数据天生不该被代理，比如第三方库实例、大型静态配置、Canvas 上下文等：
立即学习“前端免费学习笔记（深入）”；
- 在传入
reactive前，先用markRaw()标记，Vue 就不会对其递归处理 - 特别适用于解构后重新组合、深拷贝、或从后端直接接收的不可变数据
- 注意：标记后该对象及其子属性彻底失去响应性，不能用于模板绑定或依赖计算
结合 toRefs + ref 管理解构后的响应性
避免因解构导致响应性丢失，同时减少对深层结构的依赖：
- 用
toRefs把reactive对象转为一串ref，保持每个属性可响应 - 模板中直接用
{{ count }}，逻辑里操作count.value，不触碰原始嵌套路径 - 这样既保留了响应能力，又把依赖收敛在明确的几个顶层 ref 上，降低更新扩散范围
