对于Vue生命周期的解析以及对钩子函数和回调函数的理解

官方文档对于Vue的生命周期讲的很简单，可能这部分也不算重点讲解内容吧，但是为了便于理解，这里还是针对以下这三个问题给出了一些综合性的理解。

一、Vue生命周期

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。但是不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。一个经典的Vue生命周期流程图如下：

         beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
             console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
             console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
             console.log("%c%s", "color:red", "message: " + this.message)
         },
         created: function () {
             console.group('created 创建完毕状态===============》');
             console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
             console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
             console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
         },
         beforeMount: function () {
             console.group('beforeMount 挂载前状态===============》');
             console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
             console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
         },
         mounted: function () {
             console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
             console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
         },
        beforeUpdate: function () {
             console.group('beforeUpdate 更新前状态===============》');
             console.log("%c%s", "color:red", "el     : " + this.$el);
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data);
             console.log("%c%s", "color:red", "message: " + this.message);
         },
         updated: function () {
             console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
         beforeDestroy: function () {
             console.group('beforeDestroy 销毁前状态===============》');
             console.log("%c%s", "color:red", "el     : " + this.$el);
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data);
             console.log("%c%s", "color:red", "message: " + this.message);
         },
         destroyed: function () {
             console.group('destroyed 销毁完成状态===============》');
             console.log("%c%s", "color:red", "el     : " + this.$el);
             console.log(this.$el);
             console.log("%c%s", "color:red", "data   : " + this.$data);
             console.log("%c%s", "color:red", "message: " + this.message)
         }

分析：

1. beforeCreate
   官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
   解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

    beforeCreate() {
      console.log(this.page); // undefined
      console.log{this.showPage); // undefined
    },
    data() {
      return {
        page: 123
      }
    },
    methods: {
      showPage() {
        console.log(this.page);
      }
    }
   

2. created
   官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
   解释说明： 这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

    created() {
      console.log(this.page); // 123
      console.log{this.showPage); // ...
      $('select').select2(); // jQuery插件需要操作相关dom，不会起作用
    },
    data() {
      return {
        page: 123
      }
    },
    methods: {
      showPage() {
        console.log(this.page);
      }
    }
   

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

4. mounted
   官方说明：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
   解释说明：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行

    mounted() {
      $('select').select2(); // jQuery插件可以正常使用
    },
   

这时初始化插件没有问题，插件能正常运行，但是这并不代表万事大吉；下面思考一个问题：

图中的select的option都是通过异步请求得到的，然后通过v-for渲染进去，到此一切看起来很正常。还有一个需求是当页面刷新后要保留上次一查询的条件。我通过vue-router来给select指定一个默认选项；

  <template v-for='(item, index) in agentList.name' >
     <option v-if='item == name' :key='index' selected :value="item">{{item}}</option>
      <option v-else :key='index' :value="item">{{item}}</option>
   </template>

那么问题就来了，option的获得是一个异步请求，那这个请求完成的时刻和mounted的顺序是什么？如果mounted在请求成功之前执行，那将很遗憾——默认选项会设置失败

option有默认效果的是130，select中的值还是保持全部

什么时候执行$('select').select2()，是解决这个问题的关键。mounted的确是在请求成功之前执行的，所以这时的办法就是将$('select').select2()的执行放到请求成功的回调里执行：

  $.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
    const a = this.agentList,
    d = res.data;
    a.id = d.orgIds;
    a.name = d.orgNames;
    a.city = d.cityMap;
    $('select').select2()；
  });

本以为这样就完美解决了，但是发现还是会出现和上图一样的效果；如何是好？这时轮到vm.$nextTick登场了：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
官方示例代码：

    new Vue({
      // ...
      methods: {
      // ...
      example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
        this.$nextTick(function () {
          // DOM 现在更新了
          // `this` 绑定到当前实例
          this.doSomethingElse()
        })
      }
    }
  })

所以解决办法如下：

$.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
    const a = this.agentList,
    d = res.data;
    a.id = d.orgIds;
    a.name = d.orgNames;
    a.city = d.cityMap;
    this.$nextTick(() => {
      $('select').select2();
    });
  });

最后我们可以这样理解这个Vue生命周期的概念，如下整理生命周期流程图所示：

二、钩子函数

在一个有序的步骤中的特殊位置(挂载点)，插入自定义的内容，这就叫"钩子"。钩子（Hook）概念源于Windows的消息处理机制，通过设置钩子，应用程序对所有消息事件进行拦截，然后执行钩子函数。 

let btn = document.getElementById("btn");
btn.onclick = () => {
    console.log("i'm a hook");
}

 上面的例子，在按钮点击时候立即执行钩子函数。

三、回调函数

一般认为，钩子函数就是回调函数的一种，其实还是有差异的，差异地方就是：触发的时机不同。看下面的例子：

btn.addEventListener("click",() =>{
    console.log(this.onclick);//undefined
});

给btn绑定了一个监听器，只有消息捕获完成之后才能触发回调函数。

所以很明显的差别就是：钩子函数在捕获消息的第一时间就执行，而回调函数是捕获结束时，最后一个被执行的。

回调函数其实是调用者将回调函数的指针传递给了调用函数，当调用函数执行完毕后，通过函数指针来调用回调函数。而钩子函数在消息刚发出，没到达目的窗口前就先捕获了该消息，先得到控制权执行钩子函数，所以他可以加工改变该消息，当然也可以不作为，还可以强行结束该消息。