标签：el Vue console 函数 钩子 userID data red log

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

 

标签：el,Vue,console,函数,钩子,userID,data,red,log
来源： https://www.cnblogs.com/learning520/p/15009806.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。