说些题外话，引出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)
}
})
