1. beforeCreate 创建之前
    2. created 创建之后
    3. beforeMount 渲染之前 编译
    4. mounted 渲染到页面之后
    5. beforeUpdate 更新之前
    6. updated 更新之后
    7. activated
    8. Deactivated
    9. beforeDestroy 销毁之前
    10. destroyed 销毁之后

image.png

详解：


1. beforeCreate


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

  1. <script>
  2.   export default {
  3.     beforeCreate() {
  4.             console.log(this.page); // undefined
  5.       console.log{this.showPage); // undefined
  6.     },
  7.     data() {
  8.       return {
  9.         page: 123
  10.       }
  11.     },
  12.     methods: {
  13.       showPage() {
  14.         console.log(this.page);
  15.       }
  16.     }
  17.   }
  18. </script>



2. created


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

  1. <script>
  2.   export default {
  3.      created() {
  4.      console.log(this.page); // 123
  5.      console.log{this.showPage); // ...
  6.      $('select').select2(); // jQuery插件需要操作相关dom，不会起作用
  7.    },
  8.    data() {
  9.      return {
  10.        page: 123
  11.      }
  12.    },
  13.    methods: {
  14.      showPage() {
  15.        console.log(this.page);
  16.      }
  17.    }
  19.   }
  20. </script>

3. beforeMounte

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

4. mounted

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

  1. <script>
  2. export default {
  3.   mounted() {
  4.        $('select').select2(); // jQuery插件可以正常使用
  5.  },
  6. }
  7. </script>

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

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

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

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

option有默认效果的是130，select中的值还是保持全部
什么时候执行$(‘select’).select2()，是解决这个问题的关键。大家肯定猜到了，mounted的确是在请求成功之前执行的，所以这时的办法就是将

  1. $('select').select2()的执行放到请求成功的回调里执行：
  2. $.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
  3.   const a = this.agentList,
  4.         d = res.data;
  5.   a.id = d.orgIds;
  6.   a.name = d.orgNames;
  7.   a.city = d.cityMap;
  8.   $('select').select2()；
  9. });

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

  1. new Vue({
  2.   // ...
  3.   methods: {
  4.     // ...
  5.     example: function () {
  6.       // 修改数据
  7.       this.message = 'changed'
  8.       // DOM 还没有更新
  9.       this.$nextTick(function () {
  10.         // DOM 现在更新了
  11.         // `this` 绑定到当前实例
  12.         this.doSomethingElse()
  13.       })
  14.     }
  15.   }
  16. })
  18. // 所以我的解决办法如下：
  19. $.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
  20.   const a = this.agentList,
  21.         d = res.data;
  22.   a.id = d.orgIds;
  23.   a.name = d.orgNames;
  24.   a.city = d.cityMap;
  25.   this.$nextTick(() => {
  26.     $('select').select2();
  27.   });
  28. });

至此这个问题才算比较满意的解决。