Vue2的生命周期钩子

本文将以图文结合的方式讲述Vue2的11个生命周期钩子，其中包括9个用于vm、组件的钩子以及2个专用于路由组件的钩子。

一、Vue2部分生命周期的示意图与解析

本图中红色区域显示了八个重要的生命周期钩子，剩余三个将在介绍完这八个之后进行补充。

1. beforeCreate：创建Vue实例后、数据代理和数据监视开始之前调用。
2. created：数据代理和数据监视开始后调用。
3. beforeMount：模板解析后、挂载结束之前调用。
4. mounted：挂载结束后调用。（这个生命周期钩子用于：发送网络请求、绑定自定义事件、消息订阅与发布、绑定全局事件总线等）
5. beforeUpdate：数据改变后、虚拟DOM重新渲染为真实DOM前调用。
6. updated：虚拟DOM重新渲染后调用。
7. beforeDestroy：组件即将销毁之前调用。（这个生命周期钩子用于：解绑自定义事件，取消消息订阅与发布、取消全局事件总线等）
8. destroyed：组件销毁后调用。（很少使用）

二、两个专用于路由组件的钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：

1. activated：路由组件被激活时触发。
2. deactivated：路由组件失活时触发。

三、一个特殊的钩子——nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调。
什么时候用：当数据改变后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。