第二章：vue2组件的生命周期钩子函数

一、生命周期钩子函数

对于前端的vue,react,angular的几大框架来说,说到生命周期钩子函数可能会想到react,vue中也有生命周期钩子函数

二、生命周期钩子函数

• 1、beforeCreate组件实例刚创建,在计算属性之前(比如计算data属性)
• 2、created组件实例创建完成,属性已经绑定,但是DOM还未生成($el属性还不存在)
• 3、beforeMount挂载之前
• 4、mounted被创建
• 5、beforeUpdate组件数据更新前
• 6、updated组件数据更新后
• 7、activated组件被激活时调用
• 8、deactivated组件被移动时调用
• 9、beforeDestroy销毁之前调用
• 10、destroyed销毁之后调用

三、书写全部的钩子函数

• 1、html代码

  <div id="app">
      <p>{{ message }}</p>
      <input type="button" value="增加" @click="add" />
      <input type="button" value="销毁" @click="destroy" />
  </div>

• 2、javascript代码

  var app = new Vue({
      el: '#app',
      data: {
          message: 1
      },
      methods: {
          add() {
              this.message++;
          },
          destroy() {
              app.$destroy()
          }
      },
      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)
      },
      created: function() {
          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: function() {
          console.group('beforeMount 挂载前状态===============');
          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); //已被初始化  
      },
      mounted: function() {
          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: function() {
          console.group('beforeUpdate 更新前状态===============');
          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);
      },
      updated: function() {
          console.group('updated 更新完成状态===============');
          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);
      },
      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)
      },
      beforeDestroy: function() {
          console.log('销毁之前');
      },
      destroyed: function() {
          console.log('销毁之后');
      }
  })