Vue 钩子函数

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. 代码结果

 

execute beforeCreate login.vue:37

el : undefined login.vue:38

data : undefined login.vue:39

userID: undefined login.vue:40

结论1:  beforeCreate执行的时候，组建实例刚创建完成，data属性，el属性等还未初始化

execute created login.vue:45

el : undefined login.vue:46

data : [object Object] login.vue:47

userID: 1 login.vue:48

结论2:  Create执行的时候，data属性初始化完成，el属性等还未初始化

beforeMount 挂载前状态===============》 login.vue:52

el : undefined login.vue:53

undefined login.vue:54

data : [object Object] login.vue:55

userID: 1 login.vue:56

结论3: 挂载开始之前调用beforeMount，render函数首次被调用

mounted 挂载结束状态===============》 login.vue:59

el : [object HTMLDivElement] login.vue:60

<div class="body" data-v-7589b93f="">

login.vue:61

data : [object Object] login.vue:62

userID: 1

结论4: 挂载完毕，执行mounted，dom节点渲染到文档内，此时，对dom的一些操作才起作用

 

 

 

beforeUpdate，数据更新时，DOM打补丁之前调用，适合DOM更新之前访问现有的dom

updated，由于数据的更改，导致DOM重新打补丁，这之后，调用这个函数

 

posted @ 2021-07-14 10:48  乐此不疲_Yang  阅读(70)  评论(0)    收藏  举报