核心是控制组件更新时机与范围：用computed缓存、Object.freeze冻结静态数据、拆分响应式对象；善用keep-alive、稳定key、v-if/v-show合理分工；配合Devtools定位冗余更新。
核心是控制组件何时更新、怎么更新、更新多少。Vue 的响应式机制本身高效，但设计不当会放大渲染开销，尤其在中大型项目里。
精准控制组件更新时机
避免父组件一动，子组件全重绘。关键看数据依赖是否真实必要：
- 用 computed 替代模板中直接调用方法，结果自动缓存，只在依赖变化时重新计算
- 对静态或极少变动的数据，用 Object.freeze() 冻结，跳过响应式处理，比如大列表、字典项、配置对象
- 拆分响应式对象，把频繁变动的字段和静态嵌套结构分开管理，避免整个对象被 Proxy 追踪
合理使用缓存与复用机制
不重复创建、不重复挂载，是减少冗余渲染最直接的方式：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- <keep-alive> 缓存已加载的组件实例，特别适合路由页、标签页、表单草稿页。配合 :include 动态控制缓存范围，避免内存堆积
- 列表渲染必须加 :key，且 key 要稳定唯一（推荐用 id，不用 index），否则 Vue 无法复用节点，容易触发整块重排
- 动态组件切换时，用 <component :is="xxx" :key="xxx">，靠 key 强制区分不同实例，防止状态错乱和无效复用
优化条件渲染与数据流
条件指令和 props 传递方式直接影响渲染粒度：
立即学习“前端免费学习笔记（深入）”；
- v-if 和 v-show 别混用场景：v-if 适合低频开关（如权限菜单、编辑器弹窗），v-show 更适合高频切换（如选项卡、折叠面板）
- 避免 v-if 与 v-for 同级混用，Vue 3 会警告，Vue 2 易引发遍历浪费；应提前用计算属性过滤数据，或用 template 包裹再分配 v-if
- 子组件接收 props 时，如果只是展示，且父组件 props 频繁更新但内容未变，可考虑用 shallowRef 或 toRefs 拆解，避免深层响应式触发不必要的更新
从工程层辅助定位与收敛
肉眼难察觉的冗余，得靠工具和规范来暴露：
- 开发阶段开启 Vue Devtools 的 Performance 面板，观察组件更新链路，快速识别“不该更新却更新了”的节点
- 对复杂子组件，可临时加 beforeUpdate 钩子打日志，确认更新是否由预期数据驱动
- 路由组件统一设 name，配合 keep-alive 精确缓存，避免因路径参数微调导致组件反复销毁重建
