Vue:钩子函数的顺序

beforeCreated：这个钩子函数实在vue实例创建后，触发的。这个时候还没有进行data里的数据监听和事件的初始化

其实大家很多时候都会在created钩子函数中是调用事件，那么这个数据监听和事件初始化就是在beforeCreated之前和created之后进行的。

beforeMount： 这个进行模板编译，编译模板但是没有元素挂载，无法获取dom

mounted： 元素挂载结束，可以获取dom 元素 

beforeUpdata：  组件更新前调用 

updataed： 组件更新后调用

beforedestory：   vue实例销毁前执行

destoryed：      vue实例销毁之后执行   vue实例销毁后，dom元素还存在但是数据双向绑定，vue的功能就没有了，比如数据双向绑定。

export default {
      //el: '#appB',
      name: "ComponentB",
      data(){
          return{
            message:'这是组件B',
            j:0,
          }
      },
      methods:{
        change() {
          this.message = 'Datura is me'+this.j;
        },
        destroy() {
          this.message = 'Datura is me6'+this.j;
          this.$destroy();
        }
      },
      watch:{
        message(){
          debugger
          console.log(this.message);
        }
      },
      beforeCreate: function () {
        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);//undefined
      },
      created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
        console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
        console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
      },
      beforeMount: function () {
        console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
        console.log(this.$el); // 当前挂在的元素
        console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green","message: " + this.message); //已被初始化
      },
      mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green","message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
        alert("更新前状态");
        console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
        console.log("%c%s", "color:green","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green","data   : " + this.$data);
        console.log("%c%s", "color:green","message: " + this.message);
        alert("更新前状态2");
      },
      updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:green","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green","data   : " + this.$data);
        console.log("%c%s", "color:green","message: " + this.message);
      },
      beforeDestroy: function () {
        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: function () {
        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)
      }
    }

结果展示：

 

参考来源：https://www.cnblogs.com/tiangeng/p/10151663.html