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重新打补丁，这之后，调用这个函数