var vm = new Vue({
el : '#app-5',
data : {
message : 'hello world'
},
methods : {
methodDemo : function() {
var _this = this;
_this.message = 'hello world methods demo';
setTimeout(function() {
_this.$message.success(_this.message);
}, 1);
}
},
beforeCreate : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件创建前")
}, 1);
},
created : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件创建完成");
}, 1);
this.methodDemo();
},
beforeMount : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("模板编译之前,还没挂载");
}, 1);
},
mounted : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("模板编译之后,已挂载,页面上存在数据展示");
}, 1);
},
beforeUpdate : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件更新之前");
}, 1);
},
updated : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件更新成功");
}, 1);
},
beforeDestory : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件销毁之前");
}, 1);
},
destoryed : function() {
var _this = this;
setTimeout(function() {
_this.$message.success("组件销毁");
}, 1);
}
})
上面是vue的生命周期,弹框中发现一个问题,在单独使用this.$message.success("成功弹框信息")时,多条弹框会出现重叠覆盖,只显示最后一条信息的现象,所以使用定时器setTimeout可以解决这个问题,因为源码中el调用的过程中存在并发问题,所以以此提供时间,让其稍等一下以便就可以给el重新计算高度的时间,第二个弹框就可以拿到正确的偏移高度了。定时器的时间单位是毫秒级别的,即1000ms=1s。