优化 Vue 响应式性能需冻结静态配置（如 Object.freeze）、区分响应式与普通变量、善用 v-once/v-memo 锁定稳定内容，并清理失效依赖防止幽灵监听。
直接删掉那些根本不需要响应式更新的数据，让 Vue 的依赖追踪系统轻装上阵。响应式不是万能胶，粘得太多反而拖慢整个组件。
把静态配置冻结起来
API 地址、开关默认值、文案常量这类从不变化的数据，没必要进响应式系统。用 Object.freeze 包一层，Vue 就不会对它做 Proxy 拦截，也不会收集依赖。
- 写法示例：
config: Object.freeze({ apiUrl: '/api/user', pageSize: 20 }) - 注意：freeze 后对象不可修改，适合纯配置；若后续需动态改，就别冻，改用普通 const 变量
区分响应式与普通变量
在 setup 或 data 中，只对真正会变、且视图要跟着变的数据用 ref 或 reactive。其余中间计算、临时标记、函数参数等，用普通 let/const 即可。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 比如列表筛选后的临时数组、格式化时间的字符串、按钮点击状态的布尔标记（仅用于本地逻辑）——这些都不必响应式
- 常见误区：把所有 data 字段都塞进 reactive，哪怕只读一次
用 v-once 和 v-memo 锁定稳定内容
某些区域内容确定后就不再更新，比如标题、说明文字、静态图表图例，用 v-once 渲染一次即退出响应式追踪；对列表项或复杂片段，用 v-memo 显式声明依赖数组，避免因父级数据扰动导致重渲染。
立即学习“前端免费学习笔记（深入）”；
-
<h2 v-once>用户管理</h2>—— 标题不变，不参与依赖收集 -
<div v-for="item in list" :key="item.id" v-memo="[item.status, item.name]">...</div>—— 只有 status 或 name 变才更新该行
清理失效依赖，防止“幽灵监听”
条件分支中使用的响应式字段，可能在某次执行后不再被读取，但旧依赖没被清除，就会造成“监听残留”。Vue 3.4+ 已优化 computed 的依赖自动切换，但自定义 effect 或 watch 中仍需留意。
- 避免在 effect 内部做不稳定读取，比如
if (flag.value) { useA() } else { useB() }，确保每次执行路径清晰 - watch 监听多个源时，用
immediate: false+ 手动控制触发时机，减少误触发
