Vue生命周期钩子需理解各阶段能力边界：created可发请求但不可操作DOM；mounted可操作真实DOM及第三方库；beforeUpdate/updated用于响应式更新前后处理，后者禁改响应式数据；unmounted/beforeUnmount是清理资源的最后时机。

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

created：数据就绪，请求就发

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

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

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

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

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ✅ 初始化 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 不可靠