vue生命周期性能优化关键在于合理分配任务：created适合异步请求但忌万级计算；beforemount禁用dom尺寸读取；mounted需降权执行dom操作；updated须防重复渲染。
Vue 生命周期性能优化的关键，在于识别哪些钩子容易成为渲染阻塞点，并把耗时同步任务移出或延后执行。不是所有钩子都适合做初始化、请求或 DOM 操作——错放位置，轻则拖慢首屏，重则引发强制布局和主线程卡顿。
created：别塞进万级计算和 SDK 初始化
这个阶段响应式系统已就绪，但 DOM 还未生成，是发起异步请求的黄金时机。但它不适合做以下事情：
- 处理上万条数据的排序、过滤或树形结构构建（应延迟到
mounted或用requestIdleCallback分片） - 同步加载地图、图表等重型 SDK（改用动态 import +
onMounted懒加载） - 读取
localStorage并立即解析大型 JSON（可加防抖或仅在需要时读）
beforeMount：禁用“读写交替”式 DOM 查询
虚拟 DOM 已生成、真实 DOM 尚未挂载。此时若反复调用 offsetHeight、getBoundingClientRect() 等会触发强制同步布局（Layout Thrashing），开销远超预期。
- 避免在循环中多次读取同一元素尺寸；应一次性读取并缓存
- 不要在
beforeMount中操作 ref 元素——ref 还未绑定 - 如需尺寸信息，建议推迟到
mounted后用nextTick保证 DOM 可读
mounted：DOM 操作要“降权”执行
DOM 已挂载，看似安全，但一上来就渲染 ECharts、初始化 Three.js 场景、绑定未节流的 resize 监听器，仍会导致首屏卡顿。
- 大型可视化组件建议包裹
Suspense，配合异步加载 - 非关键 DOM 操作（如动画初始化、日志埋点）用
requestIdleCallback延后执行 - 监听器务必节流，且在
beforeUnmount中清除（避免内存泄漏）
updated：只响应真正变化，不盲目重绘
每次响应式数据变更都会触发，频率高、风险大。若内部逻辑未加防护，极易形成性能雪球。
- 用深比较或标记位判断是否真有业务变化，避免无意义重算
- 耗时逻辑一律转为
nextTick或微任务，防止阻塞当前更新周期 - 高频触发场景（如拖拽、输入）必须加
throttle或debounce
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
