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

曾经终败给现在 2021-09-17 04:18 343阅读 0赞

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

### vue的钩子函数图解： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]

### 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打印效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1][]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: /images/20210726/e23b43134747463790054fa419e15986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1]: /images/20210726/a3c0f97105ac4a02acf822105b1a0aea.png