随着对vue的深入学习，我们可能越来越想搞明白vue的每个生命周期和钩子函数到底发生了什么，我们应该怎么利用，比如网络请求到底应该放在那个钩子函数中，下面我们来慢慢探索

VUE生命周期和钩子函数

先看下vue api中的钩子函数

还有一张图也非常重要，就是官方提供的生命周期图示

代码测试

beforeCreate

官方说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

注解：此时data中的数据、methods中的方法还都不能调用

data:function () {
  return {
    message:'ceshi'
  }
},

beforeCreate:function(){
  console.log('====beforeCreate=====')
  console.log(this.message)    //undefined
  console.log(this.test)       //undefined
},

methods:{
 test:function () {
   console.log("methods-test")
 }
},

created

官方说明：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

注解：此时data和methods中的方法都可以调用，但是$el还未定义，操作页面的dom也无法实现

<template>
  <div id="test">{{message}}</div>
</template>

....

data:function () {
  return {
    message:'ceshi'
  }
},

created:function(){
  console.log('====created=====')
  console.log(this.message)                      //ceshi
  console.log(this.test())                       //methods-test 
  console.log(this.$el)                          //undefind
  console.log(document.getElementById('test'))   //null
},

methods:{
 test:function () {
   console.log("methods-test")
 }
},

beforeMount

官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。

注解：测试结果和created基本相同，此时$el返回的也是undefind，并不是别的文章说的已定义

<template>
  <div id="test">{{message}}</div>
</template>

....

data:function () {
  return {
    message:'ceshi'
  }
},

beforeMount:function(){
  console.log('====beforeMount=====')
  console.log(this.message)                      //ceshi
  console.log(this.test())                       //methods-test 
  console.log(this.$el)                          //undefind
  console.log(document.getElementById('test'))   //null
},

methods:{
 test:function () {
   console.log("methods-test")
 }
},

mounted

官方说明：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注解：此时dom节点已经渲染到页面中，可以进行dom相关 操作了

<template>
  <div id="test">{{message}}</div>
</template>

....

data:function () {
  return {
    message:'ceshi'
  }
},

mounted:function(){
  console.log('====created=====')
  console.log(this.message)                      //ceshi
  console.log(this.test())                       //methods-test 
  console.log(this.$el)                          //已定义
  console.log(document.getElementById('test'))   //有值
},

methods:{
 test:function () {
   console.log("methods-test")
 }
},

beforeUpdate

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

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当我们通过vue调试工具更改data中的message后，会先后触发这两个钩子函数

data:function () {
  return {
    message:'ceshi'
  }
},
beforeUpdate:function(){
  console.log('====beforeUpdate=====')
  console.log(document.getElementById('test'))
},
updated:function(){
  console.log('====updated=====')
  console.log(document.getElementById('test'))
},

beforeDestroy

官方说明：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

注解：可以通过router的跳转触发页面的destory，或者显示调用this.$destroy()

           在这两个钩子函数中，data和method中的方法仍然可以调用，只是如果再更改data，页面也不会刷新了

data:function () {
  return {
    message:'ceshi'
  }
},

beforeDestroy:function(){
  alert("关闭页面")
  console.log("====beforeDestroy=====") 
  console.log(this.message)              //仍然有效
  console.log(this.test)                 //仍然有效
  console.log(this.$el)                  //仍然有效

},
destroyed:function(){
  console.log("====destroyed=====")
  console.log(this.message)             //仍然有效
  console.log(this.test)                //仍然有效
  console.log(this.$el)                 //仍然有效
},

网络请求应该放在哪个钩子函数中

之前我写的网络请求都放在了mounted中，通过今天的学习我们可以看到，完全可以将网络请求前置到created钩子函数中，除非我们需要dom，否则完全没有区别的，还能尽早发起ajax网络请求，早一点接收到数据

父组件和子组件的钩子函数顺序

我们做一个测试，分别在父组件，子组件各钩子函数中打印出信息，可以看出先进行了父组件的beforeCreate、created、beforeMount，然后执行子组件的beforeCreate、created、beforeMount，mounted，子组件mounted之后，才执行父组件的mounted

====父组件：beforeCreate=====
====父组件：created=====
====父组件：beforeMount=====
====子组件：beforeCreate=====
====子组件：created=====
====子组件：beforeMount=====
====子组件：mounted=====
====父组件：mounted=====

但是我们也发现，在vue文档中有如下说明

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

以上就是本次学习纪录，希望能够对大家有所帮助。