vue.js(23)生命周期(构造函数)

vue.js(23)生命周期(构造函数)_第1张图片

 图片来源于vue官网,注释是我自己加的,另外,红色的函数,是和methods放在同一级的,而不是放在methods里面


现在配合代码讲一下,我们在Header.vue文件里面加上这些函数


然后进入页面

beforeCreate:vue.js(23)生命周期(构造函数)_第2张图片

created:vue.js(23)生命周期(构造函数)_第3张图片

beforeMounted:vue.js(23)生命周期(构造函数)_第4张图片

mounted:vue.js(23)生命周期(构造函数)_第5张图片

(这个时候页面显示出来了)

beforeUpdate:

vue.js(23)生命周期(构造函数)_第6张图片

然后这个时候,并没有弹出任何对话框,因为我们没有点击任何Header.vue组件,现在,我们点击press按钮

vue.js(23)生命周期(构造函数)_第7张图片

它会告知你刚刚是组件未更新之前,并且press按钮所造成的影响还没有显示出来


updated:

vue.js(23)生命周期(构造函数)_第8张图片

组件变化的内容显示出来了




你可能感兴趣的:(vue.js)