vue2的生命周期有哪些：共8个钩子

vue2的生命周期有哪些，完整包含8个生命周期钩子，分为创建、挂载、更新、销毁四大阶段，beforeCreate、created在实例创建阶段，beforeMount、mounted在挂载阶段，beforeUpdate、updated在数据更新阶段，beforeDestroy、destroyed在销毁阶段，你在开发页面、接口请求、dom操作、定时器清理时可以直接对应钩子选择执行逻辑，该钩子体系仅适用于Vue2版本，Vue3组合式API不再沿用这套命名与执行顺序，不可以直接迁移到Vue3项目中使用。

vue2生命周期各钩子执行时机

beforeCreate执行时，Vue实例刚初始化，data、methods内的数据和方法还没有完成初始化，你无法读取或者修改data里的变量，也不能调用methods函数，这个钩子很少使用，一般用于少量的全局前置埋点。created执行时，data和methods已经初始化完成，还没有开始渲染DOM，此时适合发起接口请求、初始化页面数据，DOM节点还不存在，不能操作页面元素。

beforeMount执行时，模板编译已经完成，虚拟DOM生成完毕，真实DOM还没有挂载到页面上，$el已经存在但没有绑定到页面，在这里修改数据会触发重新计算虚拟DOM，不会直接看到页面变化。mounted是挂载完成的钩子，真实DOM已经渲染到页面，你可以获取DOM元素、操作DOM节点、初始化第三方DOM类库，页面首次渲染完成后只会执行一次。

数据发生变化触发视图更新时，会先进入beforeUpdate，此时data数据已经更新，页面上的DOM内容还没有同步更新，虚拟DOM正在对比变更。updated在DOM更新渲染完成之后执行，页面内容和最新数据保持一致，多次修改同一个响应式数据，不会多次触发updated，Vue会做异步更新队列合并处理，避免频繁重绘。

beforeDestroy在实例销毁前触发，实例还保持可用状态，data、方法、DOM都还能访问，你需要在这里清除定时器、解绑自定义事件、终止还在进行的接口请求，防止内存泄漏。destroyed执行时，Vue实例已经销毁，所有指令、监听、子实例全部解绑，DOM节点还保留在页面，只是不再受Vue实例管控，修改data不会再触发视图更新。

vue2生命周期钩子对比

单个组件生命周期只会按照顺序单向执行，不会回头重复执行，mounted、destroyed这类钩子在组件整个生命周期内只运行一次，beforeUpdate、updated会随数据变更反复触发。

组件嵌套场景下，子组件的创建挂载会穿插在父组件流程里，父组件created之后，子组件才会依次走完beforeCreate、created、beforeMount、mounted，全部子组件挂载完成，父组件才进入mounted。

keep-alive包裹的组件会新增两个专属钩子，activated、deactivated，activated在组件被缓存激活时执行，deactivated在组件缓存失活时执行，这两个不属于基础8个生命周期钩子，只在缓存组件场景生效。

不要在updated钩子里面直接修改当前依赖的响应式数据，容易造成无限循环更新。

Vue官方文档2.x版本文档完整记录这套生命周期钩子的执行规则，是Vue2项目开发的统一参考依据。