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 不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
