VUE实例生命周期钩子

1、vue实例生命周期钩子的由来

每个vue应用都是通过vue函数创建一个新的vue实例开始的：

var vm = new Vue({
  //选项
})

vue实例再被创建时都要经过一系列的初始化过程——从开始创建、初始化数据、编译模板、挂载dom、渲染-更新渲染、卸载等一系列过程，称之为vue的生命周期，通俗来说vue实例从创建到销毁的过程，就是生命周期。

2、生命周期详解

lifecycle.png

官网展示的这张实例的生命周期图示。在这些生命周期钩子的函数中，给用户在不同阶段添加自己带吗的机会。
比如created钩子用来在一个实例被创建后执行代码：

 new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

提供的钩子包括：

• beforeCreate：创建前
  实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。
• created：创建后
  挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
• beforeMount：挂载前
  接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
• mounted：挂载后
  接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情。
• beforeUpdate：更新前
  当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿。
• updated：更新后
  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
• beforeDestroy：销毁前
  实例销毁之前调用。在这一步，实例仍然完全可用。一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件、保存数据等操作。
• destroyed：销毁后
  Vue 实例销毁后调用。组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。