理解vue实例的生命周期和钩子函数

. vue实例的生命周期

通俗来说 vue的生命周期就是vue实例从创建到销毁的过程，我将这个过程中的一些关键点抽取出来，简化为下面这个流程图：

 

生命周期

2. 结合生命周期理解钩子函数

vue2.0提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应：

 

生命周期和钩子函数

钩子函数	描述
beforeCreate	在实例初始化之后，数据观测（data observer） 和 event/watch事件配置之前被调用
created	在实例创建完成后立即被调用，在这一步实例已经完成了： 数据观测、属性和方法的运算和 event/watch事件的回调， 但是$el属性目前不可见。
beforeMount	在挂载开始之前被调用
mounted	在挂载成功后被调用，el被新创建的vm.$el替换
beforeUpdate	数据更新之前调用
update	数据更新完成时调用，组件dom已经更新
activated	组件被激活时调用
deactivated	组件被移除时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

3. 结合代码理解钩子函数

为了更深入的理解各个钩子函数的区别，我们结合代码去看看：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script type="text/javascript">
  export default {
    data(){
      return{
        message : "钩子函数小测试"
      }
    },
    beforeCreate(){
      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() {
      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() {
      console.group('beforeMount 挂载前状态 ------------>');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    mounted() {
      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() {
      console.group('beforeUpdate 更新前状态 ------------>');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log('真实dom结构：' + document.getElementById('app').innerHTML);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    updated() {
      console.group('updated 更新完成状态 ------------>');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log('真实dom结构：' + document.getElementById('app').innerHTML);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy() {
      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() {
      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)
    }
  }
</script>

（1）创建阶段

创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于
beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了，具体我们看看console的内容：

 

创建阶段

数据很明显了，beforeCreate触发的时el、data都没初始化，但到created的时候虽然el依然没有初始化，但是data已经生成了，并且成功将message的值绑定上。

（2）挂载阶段

beforeMount和mounted两者主要区别在于模板是否编译和挂载了。

 

挂载阶段

el是用来告诉实例在那个元素上进行挂载的，我们可以看到beforeMount触发的时候el还是没有初始化，而到mounted的时候已经找到要挂载的元素，并且将模板编译了。

（3）更新阶段

加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
这里我另外写了一个方法去改变message的值，触发更新：

 methods:{
      change(){
        this.message = '不如更新一下咯'
      }
    },

控制台的结果：

 

更新阶段

我们可以看到，当我们去改变message的值的时候，触发了beforeUpdate函数，这个时候$el的值已经更改了，但是dom并没有变动。到update的时候，才真正去更新dom结构。

（4）销毁阶段

再写一个方法来触发销毁：

 methods:{
      destroy(){
        this.$destroy()
      }
    },

控制台的结果：

 

image.png

可以发现beforeDestory和destoryed打印出来的结果并没有什么特别，el的值data的数据依然在的。这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom。具体理解可参考：https://cn.vuejs.org/v2/api/#vm-destroy

文章来源：https://www.jianshu.com/p/98517bd49179