我理解的vue生命周期

说些题外话，引出vue的生命周期。

比如人出生到寿终正寝，这是人的一个生命周期。他会经历出生，婴儿时期，童年时期，少年时期，青年，中年，老年，到 end。然后，每个时期都会有一定的历史任务在等着去完成，比如童年的时候，我们要学会基本的说话走路等，少年时期要完成一定量的识字识数等，青年要参与社会工作等，老年养老等。最重要的时期就是在青年和中年的时期，因为这个时期我们要实现个人的历史价值，完成一定的社会任务等。vue实例的时候，也是经历一定的生命周期，这个生命周期会有对应的钩子函数。好了，下面就是我自己对生命周期的理解。

这个图是vue 官网的一张解释生命周期的一张图，我们将会根据这个图来做下demo理解, Provide the img of vue's  lifecircle.

 

 var app = new Vue({
      el: '#app',
      data: {
          message : "vue life-circle" ,
      },
        beforeCreate: function () {
          console.log('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.log('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.log('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.log('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); //已被初始化 

            this.message = 'message is change'; // 在mounted 改变数据 触发下面的beforeUpdate的方法 
        },
        beforeUpdate: function () {
            console.log('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); 

            this.message = 'message is change';
            console.log('change', this.message) 
        },
        updated: function () {
            console.log('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.log('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);
            this.message = 'message  change again';
            console.log('change', this.message)

        },
        destroyed: function () {
            console.log('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)
            console.log('change again', this.message)

        }
    })

destroyed 的两个方法 需要在控制台里面 调用， app.destroyed() 
《未完，待续。。。》

参考文章： https://segmentfault.com/a/1190000008010666