vue的生命周期，以及解决el弹框重叠覆盖问题

最新推荐文章于 2024-08-13 09:12:41 发布

upton-nan

最新推荐文章于 2024-08-13 09:12:41 发布

阅读量2.5k

点赞数 2

分类专栏： html 文章标签： vue js javascript html

本文链接：https://blog.csdn.net/weixin_41926152/article/details/107744269

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

		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。