vue 生命周期一共分为四大核心阶段，分别是初始化阶段挂载阶段更新阶段卸载阶段，每个阶段内部都对应专属的生命周期钩子函数，vue2 和 vue3 的阶段划分逻辑保持一致，只是钩子命名有部分改动，vue3 组合式 api 还把钩子改成 on 开头的写法，生命周期本质就是 vue 组件从被创建，到渲染到页面，再到数据变动重新渲染，最后被销毁移除的整套自动执行流程，框架会在每个关键节点自动触发对应的钩子，开发者可以在钩子里面写入对应业务代码，比如请求接口操作 dom 清除定时器，很多新手不清楚 vue 生命周期几个阶段，经常把接口请求写在错误的钩子里面，导致拿不到 dom 或者组件已经销毁请求还在执行，出现页面报错，理解 vue 生命周期几个阶段的执行顺序，是写好组件逻辑排查异步问题的核心基础。
四大阶段详细说明
| 阶段 | vue2 钩子 | vue3 组合式钩子 | 核心作用 |
|---|---|---|---|
| 初始化阶段 | beforeCreate created | onBeforeCreate onCreated | 组件实例初始化，data 和 methods 逐步完成初始化 |
| 挂载阶段 | beforeMount mounted | onBeforeMount onMounted | 组件模板编译完成，把虚拟 dom 转为真实 dom 渲染到页面 |
| 更新阶段 | beforeUpdate updated | onBeforeUpdate onUpdated | 响应式数据发生变化，触发视图重新渲染的整套流程 |
| 卸载阶段 | beforeDestroy destroyed | onBeforeUnmount onUnmounted | 组件被移除销毁，释放资源清理副作用 |
初始化阶段
beforeCreate 实例刚刚创建，响应式数据还没有初始化完成，data 里面的值还不能访问，methods 里面的方法也还没有绑定，这个钩子一般很少使用，不适合写业务逻辑。
created 实例已经创建完成，data 响应式数据已经初始化，methods 可以正常调用，但是此时真实 dom 还没有渲染到页面，不能操作 dom 元素，这个钩子非常适合发送初始接口请求，是项目最常用钩子之一。
挂载阶段
beforeMount 模板已经编译成渲染函数，虚拟 dom 已经生成，但是还没有替换页面上的真实 dom，页面依旧是原始状态，这个钩子使用频率偏低。
mounted 组件已经成功挂载到页面，真实 dom 已经渲染完成，这个时候可以安全操作 dom，获取元素，初始化第三方插件比如图表轮播，也可以在这里发起请求，需要区分，created 和 mounted 都能请求接口，但是只有 mounted 可以拿到渲染完成的 dom。
更新阶段
beforeUpdate 响应式数据已经修改，但是页面视图还没有完成重新渲染，此时 dom 还是旧状态，适合在更新前做数据校验。
updated 新的虚拟 dom 对比 diff 完成，真实 dom 已经更新完毕，页面已经同步新数据，这个钩子会在每次数据变更触发更新的时候重复执行，注意不要在 updated 里面修改响应式数据，否则会无限循环触发更新。
卸载阶段
beforeDestroy vue2 命名，vue3 改为 onBeforeUnmount，组件即将销毁，实例里面的数据方法仍然可以访问，这个钩子是清理资源的最佳位置，清除定时器，解绑事件监听，取消未完成的接口请求，防止组件销毁之后还执行回调造成内存泄漏。
destroyed vue2 命名，vue3 改为 onUnmounted，组件已经完全销毁，dom 已经移除，实例上所有的指令监听器全部解绑，一般很少在这个钩子写业务代码。
补充特殊生命周期
keepalive 缓存组件会额外增加两个专属钩子，activated 和 deactivated，组件被 keepalive 缓存的时候，不会执行卸载阶段的销毁钩子，切换组件的时候只会触发 activated 激活，deactivated 停用，这是 vue 生命周期几个阶段之外的扩展钩子，面试和项目开发经常会遇到。
执行顺序总结
首次加载组件，执行顺序是 beforeCreate created beforeMount mounted
组件数据变更，执行顺序是 beforeUpdate updated
组件销毁，执行顺序是 beforeDestroy destroyed
keepalive 缓存组件切换，触发 activated deactivated
总结，vue 生命周期几个阶段就是初始化挂载更新卸载四大块，记住每个钩子执行时机，区分能不能访问 data 能不能操作 dom，合理选择钩子放置接口 dom 操作清理代码，就能避开大部分异步渲染和内存泄漏类 bug。
【常见问题】
问题 1 vue 生命周期几个阶段里面，哪个钩子可以操作真实 dom
回答 1 vue 生命周期几个阶段里面，只有挂载阶段的 mounted 钩子可以操作真实 dom，created 钩子虽然数据已经初始化，但是页面 dom 还没有渲染，无法获取 dom 元素。
问题 2 vue 生命周期几个阶段，为什么不建议在 updated 里面修改数据
回答 2 vue 生命周期几个阶段的 updated 是视图更新完成之后触发，如果在 updated 里面继续修改响应式数据，会再次触发更新阶段，反复执行 updated，造成死循环页面卡顿。
问题 3 vue 生命周期几个阶段，vue2 和 vue3 的阶段划分一样吗
回答 3 vue 生命周期几个阶段的整体划分逻辑 vue2 和 vue3 是一样的，都是初始化挂载更新卸载，只是部分钩子名称修改，组合式 api 增加 on 前缀，执行顺序没有变化。
问题 4 vue 生命周期几个阶段，keepalive 组件还会执行销毁钩子吗
回答 4 vue 生命周期几个阶段里面，普通组件卸载会执行销毁钩子，但是 keepalive 缓存的组件不会执行卸载销毁阶段，只会触发 activated 和 deactivated 这两个缓存专属钩子。
【免责申明】
本内容仅作为 vue 技术学习参考，不同 vue 版本生命周期 api 命名和细节存在差异，实际开发请以对应版本官方文档为准，本内容不对依照本文编写代码产生的报错异常承担责任。
