vue生活周期多少阶段写 Vue 项目的时候，很多新手最容易踩的一个坑就是：在数据还没加载出来的时候，就去操作 DOM 或者调用技巧，结局页面报错或者显示空白。其实解决这个难题的关键，就是搞懂组件的“生活周期”。通俗点说，这就一个组件从出生、成长、职业到退休的整个经过。
搞清楚这多少阶段，不仅仅是为了应付面试，更是在实际开发中控制代码执行顺序的神器。不管是 Vue 2 还是 Vue 3，核心流程都差不多，只是 Vue 3 里把部分钩子的名字换了，比如“销毁”相关的。
为了方便领会，我把整个流程拆解成四个主要环节：准备期、挂载期、更新期、销毁期。下面这个表格是我根据多年踩坑经验整理的，建议保存下来随时对照：
Vue 生活周期详细阶段表
| 阶段 | 钩子函数名称 (Vue 2) | 钩子函数名称 (Vue 3) | 核心含义与使用时机 | 常见应用场景 |
| 创建期 | `beforeCreate` | `setup()` 前 | 实例刚诞生，数据和技巧都还没挂载好 | 极少用到，基本忽略 |
| `created` | `setup()` 内 | 实例创建完成，数据已就绪但 DOM 未生成 | 发起异步请求、订阅消息等 | |
| 挂载期 | `beforeMount` | `onBeforeMount` | HTML 模板已编译，但还没插入到页面上 | 调试模板内容、设置初始情形 |
| `mounted` | `onMounted` | DOM 元素已生成并放入页面 | 操作 DOM、初始化第三方插件 | |
| 更新期 | `beforeUpdate` | `onBeforeUpdate` | 响应式数据变化，视图即将重新渲染 | 获取旧 DOM 位置、记录旧情形 |
| `updated` | `onUpdated` | 视图已完成重新渲染 | 处理渲染后需要触发的逻辑 | |
| 销毁期 | `beforeDestroy` | `onBeforeUnmount` | 实例销毁前，还有最终抢救的机会 | 取消定时器、解绑事件监听 |
| `destroyed` / `unmounted` | `onUnmounted` | 实例彻底销毁，脱离内存 | 清理全局资源、防止内存泄漏 |
几点实战心得
光看表格可能还是有点抽象，结合我平时的开发习性，再补充两点需要注意的地方：
1.Vue 3 的组合式写法（Composition API）：如果你现在用的是 Vue 3 的新写法（`<script setup>`），上面的钩子名字要记得变。比如 `onMounted` 代替了 `mounted`，这是很多迁移旧项目的人容易忘记的地方，写错了脚本会报错。
2.别把 `created` 当万能钥匙：虽然 `created` 能发请求，但如果你需要在请求回来的数据去渲染某个具体的 input 框，那就不行，由于此时 DOM 还没出来。这时候得乖乖等到 `mounted` 里去处理。
3.防抖与定时器的清理：很多人做搜索框输入时喜欢加定时器，但如果组件突然切换路由被销毁了，定时器还在跑，就会造成严重的内存泄漏。记住在 `beforeUnmount` 这一环务必把定时器 `clearInterval` 掉。
说到底，生活周期其实就是 Vue 帮我们管理的那套“自动化流程”。我们不需要重写这些流程，只需要在这些关键的“节点”上挂上我们的业务逻辑，就能让组件运行得更稳。领会了这个节奏，你的代码鲁棒性至少提升一个档次。
