性能优化应从编码初期开始，包括模板渲染优化（如v-for用稳定key、v-if/v-show合理选择、静态内容用v-once）、数据冻结（Object.freeze避免响应式开销）、组件懒加载与keep-alive精准使用、以及逻辑层用计算属性、watch配置和$nextTick控制更新节奏。
性能不是上线前才补的课，而是从第一行代码开始就该有的习惯。Vue 提供的响应式机制和虚拟 DOM 虽然高效，但不加约束地使用，反而容易放大开销。开发阶段埋下性能意识，能避免后期大量重构和难以定位的卡顿。
写模板时就考虑渲染成本
模板是用户最先感知性能的地方。v-for 必须带 :key，且 key 要稳定唯一——用 id 而非 index；避免在 v-for 内部嵌套深层计算或方法调用；v-if 和 v-show 别混用：条件极少变动用 v-if，频繁切换用 v-show；静态内容加 v-once，比如版权信息、说明文案，渲染一次后不再追踪变化。
数据初始化就规避响应式陷阱
纯展示型列表（如后台商品列表、日志记录）不需要响应式更新。获取数据后立即用 Object.freeze() 冻结对象或数组，Vue 2/3 都会跳过响应式转换，大幅减少 Observer 初始化开销。注意：冻结后无法再赋值响应式属性，所以只适用于“只读+不更新”的场景。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
组件拆分与加载策略前置设计
路由组件默认用动态 import 实现懒加载：const Home = () => import('./views/Home.vue')；非路由组件也别全量引入，把重逻辑、大体积的子组件设为异步组件；keep-alive 不要盲目包裹，只缓存真正需要保留状态、且切换频繁的组件（如多标签页、表单草稿页），否则内存占用反升。
立即学习“前端免费学习笔记（深入）”；
逻辑层主动控制更新节奏
计算属性比方法更适合复用逻辑，它自带缓存；watch 默认是惰性执行，但若监听深层对象，记得加 deep: true 并配合 immediate: false 避免初始化时触发；批量修改数据后，需 DOM 更新再操作时，用 this.$nextTick() 而非 setTimeout；避免在模板中直接调用函数，尤其带参数的，这会导致每次重渲染都执行。
