Vue组件生命周期本身无显著性能开销，性能瓶颈源于钩子中不当逻辑：created适合提前发请求（比mounted快100–300ms），但不可操作DOM；mounted首获DOM访问权，需用nextTick处理子组件依赖；updated禁改响应式数据以防死循环；beforeUnmount/beforeDestroy必须清理定时器、事件监听等以防内存泄漏。
Vue 组件生命周期本身不产生显著性能开销，真正影响性能的是开发者在钩子中写的逻辑——尤其是不当的时机选择、重复操作或未清理的副作用。
created 是首屏数据获取的最优时机
数据请求放在 created 而非 mounted，可提前 100–300ms 发起网络请求。因为 created 在响应式系统初始化完成后立即执行，此时 this.data、this.methods、watch/computed 都已就绪，但 DOM 尚未生成——而数据获取完全不需要 DOM。若拖到 mounted 再请求，等于人为增加白屏时间。
- 避免在 created 中操作 DOM（不可用，会报错）
- 可并行调用多个 API，用
Promise.all减少等待时间 - 不要在 created 中做复杂计算或大量对象遍历，否则阻塞主线程
mounted 后需谨慎处理 DOM 和第三方库
mounted 是首个能安全访问真实 DOM 的钩子，但要注意：子组件可能尚未挂载完成；直接操作 DOM 可能被 Vue 下次更新覆盖；引入滚动库、图表库等需确保容器元素已渲染且尺寸稳定。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 依赖子组件 DOM 的操作，应包裹在
this.$nextTick()或 Composition API 的nextTick()中 - 初始化
IntersectionObserver、ResizeObserver等观察器建议放在这里 - 避免在 mounted 中反复读写 offsetHeight/scrollTop 等触发重排的属性
updated 钩子容易引发性能陷阱
updated 在每次响应式数据变更导致视图重绘后触发，频率高、不可控。滥用会导致“请求→更新→再次触发 updated→再请求”的死循环，或频繁重绘卡顿。
立即学习“前端免费学习笔记（深入）”；
- 禁止在 updated 中修改响应式数据（如
this.xxx = ...），除非加防抖或状态守卫 - 仅用于纯副作用：比如同步外部 UI 库状态、手动聚焦输入框、触发动画帧
- 高频更新场景下，可用
lodash.throttle或原生requestIdleCallback降频
销毁阶段必须清理资源
beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）是最后能安全访问 this 的时机。漏掉清理会导致内存泄漏——定时器持续运行、事件监听器残留、全局 bus 订阅未取消、Canvas 动画未停止等。
- 清除所有
setInterval/setTimeoutID - 解绑
window.addEventListener、document.addEventListener - 调用第三方库的
destroy()或dispose()方法（如 ECharts、Mapbox） - 使用
onBeforeUnmount（组合式 API）比选项式更易追踪生命周期依赖
