vue生命周期详解、钩子函数的调用（简单易懂）

定义：vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。

 

vue的钩子函数图解：

 

vue的钩子函数使用总结：

1、beforeCreate（创建前）:beforeCreate钩子函数，这个时候，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom和data中的数据，可以在这里面使用loading

2、created（创建后）:created函数中可以对data对象里面的数据进行使用和更改，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，也可以结束loading; 这里进行dom操作需要使用vue.nextTick()方法

3、beforeMount（挂载前）：beforeMount钩子函数，vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。在这里也可以更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4、mounted（挂载后）：mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，data.filter成功渲染，可以在这里操作真实dom等事情...

5、beforeUpdate （更新前）：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6、updated（更新后）：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy（销毁前）：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8、destroyed（销毁后）：vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。这个时候，执行destroyed，在这里做善后工作也可以

 

vue的钩子函数代码验证：

console打印效果：

demo验证代码：

<template>
  <div>
    <h3>{{testMsg}}</h3>
    <p style="color:red;" id="testNum">{{testNum}}</p>
    <div><button @click="changNum()">点击修改num的数值大小</button></div>
    <p style="color:red;">过滤器处理后的值：{{testNum | add(10,20)}}</p>
    <div><button @click="destroyVue()">销毁</button></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  // data是数据对象
  data () {   
    return {
      testMsg:"原始值",
      num:2,
    }
  },

  //computed对象包括需要计算的属性，属性值依赖于别的数据
  computed:{
    testNum:function(){
      let that =this;
      return that.num * 3;
    },
  },

  //检测某一属性值的变化，属性值的变化会造成其他dom变化
  watch:{
    testNum:function(val){
      if(val>9){
        console.log("testNum的值变得大于9了！");
      }
    }
  },

  //组件内部的方法
  methods:{
    changNum:function(){
      let that =this;
      that.num=5;
    },
    destroyVue:function(){
      this.$destroy();
    }
  },

  //过滤器对象，filter的第一个参数默认是当前的item值
  filters:{
    add:function(val,num1,num2){
      return val+num1+num2;
    },
  },

  //vue实例创建前
  beforeCreate:function(){
    console.group('beforeCreate 创建前状态===============》'); //console的分组打印
    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","testMsg: " + this.testMsg);//输出undefined
    console.log("%c%s", "color:red","testNum: " + this.testNum);//输出undefined
    console.groupEnd(); 
  },

  //vue实例创建完成，可以进行data对象中数据操作，一般获取初始化数据
  created:function(){
    console.group('created 创建完成状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //输出undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //输出[Object Object] ,初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出:"原始值",初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//输出：6，可以computed计算
    console.groupEnd(); 
  },

  //vue实例挂载前，不能获取$el元素，生成的虚拟dom
  beforeMount:function(){
    console.group('beforeMount 挂载前状态===============》');
    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","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //无输出，dom未生成
    console.groupEnd(); 
  },

  //
  mounted:function(){
    console.group('mounted 挂载完成的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //输出[object HTMLDivElement],初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //输出6，初始化成功
    console.groupEnd(); 
  },

  //更改data对象中数据后，页面渲染新数据前的状态
  beforeUpdate:function(){
    console.group('beforeUpdate 更新前的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //初始化成功
    console.groupEnd(); 
  },

  //数据更改后并重新渲染后，dom也重新更新了
  updated:function(){
    console.group('updated 更新完成的状态==========');
    console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //初始化成功
    console.groupEnd(); 
  },

  //销毁前
  beforeDestroy:function(){
    console.group('beforeDestroy 销毁前的状态');
    console.log("%c%s", "color:red","el     : " + this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);
    console.log("%c%s", "color:red","testNum: " + this.testNum);
    console.log($("#testNum").text());  
    console.groupEnd(); 
  },

  //销毁后修改data数据无效，生成的dom依旧存在
  destroyed(){
    console.group('destroyed 销毁完成的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);
    console.log("%c%s", "color:red","testNum: " + this.testNum);
    console.log($("#testNum").text());  
    console.groupEnd(); 
  },

}
</script>