Vue状态管理应精准控制响应式范围：用shallowRef/shallowReactive限制代理深度，markRaw/Object.freeze标记静态数据，延迟响应化并精简依赖路径。
Vue 状态管理中处理复杂响应式属性劫持，关键不是“绕开”响应式，而是让响应式只作用在真正需要的地方。初始化卡顿、内存飙升、更新扩散，往往不是 Proxy 本身慢，而是不该响应的数据被深度代理了。
用 shallowRef / shallowReactive 控制代理深度
它们不递归处理嵌套结构，只在第一层建立响应连接，适合大量静态或整体替换的场景：
-
shallowRef：仅
.value赋新值会触发更新；内部对象（如 API 返回的完整列表）保持普通 JS 状态，不触发依赖收集 -
shallowReactive：只代理对象自身属性变化（
state.items = []可响应），但state.items[0].name = 'x'不会通知更新 - 注意模板写法：若用了
shallowRef(data)，又在模板里写{{ data.user.profile.avatar }}，profile 内部改了视图不会动——这时应单独对user.profile做reactive，或直接用ref替代
标记静态数据，从源头跳过劫持
明确告诉 Vue：“这部分你不用管”，避免无意义的 getter/setter 注入和依赖追踪：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
markRaw()：包裹第三方实例（如 Chart.js 图表对象）、枚举常量、JSON 配置等，确保不被转为响应式 -
Object.freeze()：适用于只读元信息（如国家列表、字段配置），Vue 2/3 均识别该标记，不为其添加响应能力 - SSR 场景下，Proxy 对象可能序列化为空对象，建议用
toRaw()提取原始数据再传递
延迟响应化，按需激活关键字段
不追求“一上来就全响应”，而是等真实交互发生时再介入：
立即学习“前端免费学习笔记（深入）”；
- 初始状态可用普通对象或
null占位；在onMounted或用户点击后，再用shallowReactive包裹核心字段 - 异步加载的数据，先
shallowRef(null)，成功后再赋值；若只需局部响应（如勾选状态），用独立ref(new Set())管理 ID 列表，不污染原始数据结构 - 路由级组件配合
defineAsyncComponent+shallowRef，未显示时不提前代理内部状态
精简依赖路径，减少无效追踪
每次属性访问都会触发 track()，模板越复杂、字段越深，依赖图就越臃肿：
- 解构
reactive对象时，只用toRefs提取实际用到的字段，避免把整个对象包装成一堆 ref -
watch优先监听精确路径，例如watch(() => obj.user.profile.avatar)，而非监听整个obj - 大型表单中，非实时校验字段（如备注、附件列表）可抽离为
shallowRef或普通对象，降低响应式负担
