Vue2生命周期汇总/Vue2所有生命周期

1.beforeCreate（创建前）

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用加载项目配置文件

该钩子函数基本不用，因为此时也没什么能操作的

2.created（创建后）

在实例创建完成后被立即调用。实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算， watch/event 事件回调。 在这个钩子中向后端请求数据。 实例已经创建完成之后被调用。在这一步，实例已完 成以下的配置：数据观测 (data observer)，属性和 方法的运算，watch/event 事件回调。 在执行data()方法前 props 属性有数据已经可以访问 watch 和 computed 监听函 数此时为 null，此时 this.computed 里的计算属 性值为 undefined。data 函 数执行完后，watch 和 computed 监听函数才可用， 因为 data 函数执行完后，data函数return 的属性这 时才可用。然而，挂载阶段 还没开始，$el 属性目前不可见

该钩子函数为最常用之一，可以对设施的data（）进行修改，也可以去进行与后端的交互请求等，注意，这个阶段不管是ref还是document等都是拿不到的

3.beforeMount（挂载前）

在挂载开始之前被调用：相关的 render 函数首次被调用 可以请求数据 可以修改数据

因为有created，所以该函数不常用

4.mounted（挂载后）

实例被挂载后调用，这时 el 被新创建 的 vm.$el 替换。如果根实例挂载到了一个文档内的元素上，当 mounted 被调 用时 vm.$el 也在文档内 Echarts 的操作在这里完成

最常用的生命周期函数之二，此时已经可以从dom上面获取对应的元素，同时此时已经加载完成，可以进行一些dom上的动态数据操作

5.beforeUpdate（更新前）

数据更新时调用，发生在虚拟 DOM 打补 丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器

6.updated（更新后）

当这个钩子被调用时，组件 DOM 已经更 新，所以你现在可以执行依赖于 DOM 的 操作。然而在大多数情况下，你应该避 免在此期间更改状态。如果要相应状态 改变，通常最好使用计算属性或 watcher 取而代之

7.activated（组件缓存被激活时）   

被 keep-alive 缓存的组件激活时调用 使用组件缓存并激活时使用

8.deactivated（组件缓存停用时）

被 keep-alive 缓存的组件停用时调用

9.beforeDestroy（销毁前）

实例销毁之前调用。在这一步，实例仍然完全可用 能获得 dom 全局事件监听、全局计时器

10.destroyed（销毁后）

实例销毁后调用。该钩子被调用后，对 应 Vue 实例的所有指令都被解绑，所有 的事件监听器被移除，所有的子实例也 都被销毁 能获得 dom 全局事件监听、

全局计时器

11.errorCaptured（子组件发生错误时）

当捕获一个来自子孙组件的错误时被调 用。此钩子会收到三个参数：错误对象、 发生错误的组件实例以及一个包含错误 来源信息的字符串。此钩子可以返 有子组件的组件中避免子 组件产生错误