Vue的生命周期

最新推荐文章于 2022-08-07 12:11:15 发布

chijiajing

最新推荐文章于 2022-08-07 12:11:15 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/chijiajing/article/details/82804540

学习专栏收录该内容

96 篇文章

订阅专栏

本文深入解析Vue.js的生命周期，包括创建前、创建后、装载前、装载后、数据更新前后及销毁前后各个阶段的状态和作用。通过实例代码展示了不同阶段中$el、$data和msg属性的变化，帮助开发者理解Vue组件在不同生命周期阶段的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
</head>
<body>
	<div id="box">{{msg}}</div>
	<script type="text/javascript">
		//Vue的生命周期
		var vm=new Vue({
			el:"#box",
			data:{msg:"吴师傅"},
			//创建前
			beforeCreate:function(){
				console.group("-----Vue创建前-------");
				console.log(this.$el);		//没有值
				console.log(this.$data);	//没有值
				console.log(this.msg);	//没有值
			},
			created:function(){
				console.group("-----Vue创建后-------");
				console.log(this.$el);			//没有值
				console.log(this.$data);		//有值了
				console.log(this.msg);			//有值了
			},
			beforeMount:function(){
				console.group("-----Vue装载前(渲染)-------");
				console.log(this.$el);			//{{msg}}没有被赋值，但已有页面元素
				console.log(this.$data);		//有值了
				console.log(this.msg);			//有值了
			},
			mounted:function(){
				console.group("-----Vue装载后(渲染)-------");
				console.log(this.$el);			//{{msg}}被装载，已有值
				console.log(this.$data);		//有值了
				console.log(this.msg);			//有值了
			},
			beforeUpdate:function(){
				console.group("-----Vue数据被更新前-------");	
				console.log(this.$el);			//控制台直接更新值之后，直接更新了
				console.log(this.$data);		//有值了
				console.log(this.msg);			//有值了
			},
			updated:function(){
				console.group("-----Vue数据被更新后-------");
				console.log(this.$el);			//控制台直接更新值之后，直接更新了
				console.log(this.$data);		//有值了
				console.log(this.msg);			//有值了
			},
			beforeDestroy:function(){
				console.group("-----Vue销毁前-------");
				console.log(this.$el);			//无变化
				console.log(this.$data);		//无变化
				console.log(this.msg);			//无变化
			},
			destroyed:function(){
				console.group("-----Vue销毁后-------");
				console.log(this.$el);			//无变化
				console.log(this.$data);		//无变化
				console.log(this.msg);			//销毁后就没有msg了,也无法更改
			}
		});
	</script>
</body>
</html>