什么是生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下图是官网中实例的生命周期示例图：

• beforeCreate：是第一个生命周期函数，表示实例完全被创建出来之前会执行这个函数。在此函数执行时，data和methods中的属性与方法定义都还没有初始化。
• created：是第一个生命周期函数，在此函数中，data 和 methods 都已经被初始化好了。
• beforeMount：是第三个生命周期函数，表示模板已经在内存中编辑完成了，但是还没有被渲染到页面中。
• mounted：第四个生命周期函数，此时内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当此函数执行完毕，表示实例已经被完全创建好了。
• beforeUpdate：此时界面还没有被更新。
• updated：updated 事件执行的时候，页面和 data 数据已经保持同步。
• beforeDestroy：销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态。
• destroyed：当destroy函数执行时，组件中所有的方法与数据已经被完全销毁。

示例：

我们结合代码去看钩子函数的执行，例如下面这段代码：

    
    <script src="./src/vue.min.js" type="text/javascript" ></script>




     
{{ message }}
     
     


<script type="text/javascript">
    
  var app = new Vue({
       el: '#app',
       data: {
          message : "侠课岛欢迎你" 
       },
       methods:{
            change() {
                this.message = '好好学习，天天向上';
            },
            destroy() {
                app.$destroy();
            }
        },
       beforeCreate: function () {
            console.group('beforeCreate 创建前状态：');
            console.log("%c%s", "color:gary" , "el     : " + this.$el); 
            console.log("%c%s", "color:gary","message: " + this.message)  
       },
       created: function () {
            console.group('created 创建完毕状态：');
            console.log("%c%s", "color:green","el     : " + this.$el); 
            console.log("%c%s", "color:green","message: " + this.message); 
       },
       beforeMount: function () {
            console.group('beforeMount 挂载前状态：');
            console.log("%c%s", "color:gary","el     : " + (this.$el)); 
            console.log("%c%s", "color:gary","message: " + this.message); 
       },
       mounted: function () {
            console.group('mounted 挂载结束状态：');
            console.log("%c%s", "color:orange","el     : " + this.$el); 
            console.log("%c%s", "color:orange","message: " + this.message);
       },
       beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态：');
            console.log("%c%s", "color:gary","el     : " + this.$el);
            console.log("%c%s", "color:gary","message: " + this.message); 
       },
       updated: function () {
            console.group('updated 更新完成状态：');
            console.log("%c%s", "color:Violet","el     : " + this.$el);
            console.log("%c%s", "color:Violet","message: " + this.message); 
       },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态：');
            console.log("%c%s", "color:gary","el     : " + this.$el);
            console.log("%c%s", "color:gary","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态：');
            console.log("%c%s", "color:blue","el     : " + this.$el);
            console.log("%c%s", "color:blue","message: " + this.message)
        }
    })
</script>

在浏览器中打开：

点击更新数据按钮：

点击销毁按钮：

钩子函数

一个指令定义对象可以提供如下几个钩子函数，这些钩子函数都是可选：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• unbind：只调用一次，指令与元素解绑时调用。
• inserted：被绑定元素插入父节点时调用。
• update：所在组件的 VNode 更新时调用，可能发生在其子 VNode 更新之前。
• componentUpdated：指令所在组件的 VNode 及其子 VNode全部更新后调用。

钩子函数参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含属性有name、value、oldValue、arg、expression、modifiers等。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

钩子函数使用

下面是一个自定义钩子使用：

<script src="./src/vue.min.js"></script>


  

    
    更改
  

<script>
  Vue.directive('hello', {
    bind: function (el) {
      console.log('bind')
    },
    inserted: function (el) {
      console.log('inserted')
    },
    update: function (el) {
      console.log('update')
    },
    componentUpdated: function (el) {
      console.log('componentUpdated')
    },
    unbind: function (el) {
      console.log('unbind')
    }
  })
  var myComp = {
    template: '
{{msg}}
',
    props: {
      msg: String
    }
  }
  new Vue({
    el: '#app',
    data(){
      return{
        message:"侠课岛"
      }
    },
    methods:{
      change: function () {
          this.message = '小飞侠'
      }
    },
    components: {
      myComp: myComp
    },
  });
</script>

演示效果：