Vue生命周期钩子图解及执行顺序

Vue生命周期钩子的核心不在于死记硬背执行顺序，而在于精准把握每个阶段的能力边界与使用禁忌：created适合初始化数据和发起请求但不可触碰DOM；mounted是操作真实DOM和集成第三方库的黄金时机；beforeUpdate和updated需谨慎用于响应式更新前后的DOM状态处理，尤其避免在updated中修改响应式数据引发死循环；unmounted（或destroyed）则是清理定时器、取消请求、解绑事件等资源回收的最后防线。掌握“能做什么、不能做什么”，才能写出健壮、可维护的Vue组件。

记 Vue 生命周期钩子，关键不是死背顺序，而是理解每个阶段“能做什么、不能做什么”。下面按实际开发中最常遇到的场景，帮你理清逻辑。

created：数据就绪，请求就发

这是你最早能安全访问 this.data、调用 this.methods、发起 API 请求的地方。DOM 还没生成，所以别碰 $el 或操作元素。

• ✅ 推荐在这里初始化数据、启动定时器、发接口获取列表
• ❌ 不要尝试 this.$refs.xxx.focus() 或修改样式——DOM 不存在
• ⚠️ 定时器记得在销毁前清除，避免内存泄漏

mounted：DOM 已挂载，第三方库可上

组件真实 DOM 已插入页面，this.$el 可访问，所有子组件（同步的）也基本就位。

• ✅ 初始化 ECharts、Mapbox、Swiper 等依赖真实 DOM 的库
• ✅ 聚焦输入框、滚动到指定位置、监听窗口 resize
• ⚠️ 若需确保子组件也完成渲染，可用 this.$nextTick()（Vue 2）或 nextTick()（Vue 3）

beforeUpdate / updated：状态变了，DOM 快/已更新

这两个钩子成对出现，只在响应式数据变化触发重渲染时执行。

• beforeUpdate：适合读取更新前的 DOM 状态，比如保存当前滚动条位置
• updated：适合重新绑定某些需要 DOM 更新后才生效的逻辑，比如重新初始化一个插件
• ❌ 千万别在 updated 里改响应式数据，否则会再次触发更新，形成死循环

beforeUnmount / unmounted（Vue 3）或 beforeDestroy / destroyed（Vue 2）：该收尾了

组件即将消失，是清理资源的最后机会。

• ✅ 清除定时器、取消未完成的请求（如用 AbortController）、解绑全局事件（window.removeEventListener）
• ✅ 解除 EventBus 订阅、关闭 WebSocket 连接
• ❌ 不要在 unmounted / destroyed 里再调用 this 方法或访问 data——实例已解构，this 不可靠

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~