Vue生命周期钩子函数

下面先附上官网的一张图示，附有注释讲解。随着你的不断学习和使用，它的参考价值会愈来愈高。

全部的生命周期钩子自动绑定 this 上下文到实例中，所以你能够访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是由于箭头函数绑定了父上下文，所以 this与你期待的 Vue 实例不一样。

• beforeCreate

在实例建立以前，data中的数据，methods、watch、computed里的方法都还不能访问 打印出来全都是undefined。那么问题来了：如何在这个生命周期获取data中的数据呢？

异步方式获取data：this.$nextTick或者setTimeout都行。至关于在初始化前告诉容器，等整个视图都渲染完毕再跑里面的代码。这种方式别说拿data了，拿渲染完DOM都OK~

同步方式获取data:  在beforeCreate前，全部的options都会先存到vm.$options中, 就是直接从this.$options.data里去拿。好比this.$options.data()[key]就好。以下:

export default {
  name: 'App',
  data () {
    return {
      b: {
        name: 'clearlove'
      }
    }
  },
  beforeCreate () {
    console.log(this.$options.data()['b'], '实例建立以前')    //{ name: 'clearlove'} '实例建立以前'
  }
} 
// this.$options.data就是上方的data函数复制代码

可是实际状况中，历来没遇到过须要在组件还没初始化就去拿data的……

• created

实例已经建立，能够直接使用实例中的数据和方法，可是还不能对DOM节点进行访问。即$el属性不可见。该阶段容许进行异步请求

<template>
  <div id="app">
    <div id="nav" ref="myDiv"></div>
  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$refs.myDiv, '实例建立完成')    // undefined '实例建立完成'
  }
}复制代码

• beforeMount

相关的 render 函数首次被调用。

• mounted

相关的 render 函数首次被调用。DOM节点已经渲染，能够进行DOM操做，好比事件监听。该阶段容许进行异步请求，可是若是是父组件异步获取数据要使用props传递给子组件的话，则要在created里去发异步请求。具体缘由看下方父子组件的生命周期

• beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。能够修改data，并不会触发附加的冲渲染过程。这里的$el对象已经修改，可是页面上的数据尚未发生改变。

• updated

DOM结构上的数据已经完成更新。若再次修改data，会再次触发beforeUpdate、updated，进入死循环。

• beforeDestroy

实例被销毁前调用，也就是说在这个阶段仍是能够调用实例的。

实例的销毁，vue实例仍是存在的，只是解绑事件的监听和数据与view的绑定，即数据驱动。

• destroyed

实例被销毁后调用，全部的事件监听器已被移除，子实例被销毁。

这里再简单说一下父子组件的生命周期：

• 加载渲染过程： 

 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 

• 子组件更新过程： 

 父beforeUpdate->子beforeUpdate->子updated->父updated 

• 父组件更新过程： 

 父beforeUpdate->父updated 

• 销毁过程： 

 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结

Vue的生命周期函数为开发者提供了很是便利的操做。可是善用生命周期才会不踩坑，掌握好Vue的生命周期是很是重要的。它能在很大程度上减小咱们平常开发的BUG。

必定须要注意数据获取是个异步过程，而生命周期函数的运行是独立的！只要涉及到DOM更新的操做，推荐你们使用Vue的自带方法$nextTick。这个方法的意思是把回调函数内的操做延迟到下一个DOM更新循环以后。Vue自己会将全部DOM更新的操做放入一个队列里，$nextTick就是会将方法内回调函数的操做延迟到队列里下一个DOM更新后执行。