vue生命周期图片详解

vue2.X生命周期详解中文

生命周期

生命周期钩子的11个阶段：

1. 创建：
   beforeCreate – 数据初始化前
   created – 数据初始化之后
2. 挂载：
   beforeMount – 数据准备渲染
   Mounted – 数据渲染完成
3. 运行：
   beforeUpdata – 数据更新前
   updated – 数据更新
4. 缓存：（若没有使用keep-alive将直接进行第5步–销毁）
   activated – keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
   deactivated – keep-alive组件停用时调用，该钩子在服务器端渲染期间不被调用。
5. 销毁：
   beforeDestroy – 结束之前执行
   destroyed – 执行结束
6. 错误处理：
   errorCaptured – 错误处理机制

父子组件生命周期执行顺序：

1.1.挂载阶段

该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为：
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。

1.2.更新阶段

该过程主要涉及 beforeUpdate、updated 2 个钩子函数。注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。执行顺序为：
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

1.3.销毁阶段

该过程主要涉及beforeDestroy、destroyed 2 个钩子函数。执行顺序为：
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

将路由导航、keep-alive、和组件生命周期钩子结合

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：
1- beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。

2- beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。

3- beforeEnter: 路由独享守卫

4- beforeRouteEnter: 路由组件的组件进入路由前钩子。

5- beforeResolve:路由全局解析守卫

6- afterEach:路由全局后置钩子

7- beforeCreate:组件生命周期，不能访问this。

8- created:组件生命周期，可以访问this，不能访问dom。

9- beforeMount:组件生命周期

10- deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。

11- mounted:访问/操作dom。

12- activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。

13- 执行beforeRouteEnter回调函数next。