1. VUE生命周期
2. 测试代码
data(){
return {
userID:1
}
},
beforeCreate(){
console.log("execute beforeCreate");
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","userID: " + this.userID);
// var userID =1;
// this.$store.dispatch("userModules/getuserInfo",{userID});
},
created(){
console.log("execute created");
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","userID: " + this.userID);
},
beforeMount(){
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","userID: " + this.userID);
},
mounted(){
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","userID: " + this.userID);
},
beforeUpdate(){
alert("更新前状态");
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","userID: " + this.userID);
alert("更新前状态2");
},
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","userID: " + this.userID);
}
3. 代码结果
