3.vue生命周期钩子函数有哪些?(vue生命周期的理解)

<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>