生命周期

最新推荐文章于 2023-05-10 10:06:39 发布

梦醒时见你

最新推荐文章于 2023-05-10 10:06:39 发布

阅读量58

点赞数

分类专栏：生命周期

本文链接：https://blog.csdn.net/suifeng_erqu/article/details/115199110

版权

生命周期专栏收录该内容

1 篇文章 0 订阅

订阅专栏

beforeCreate:         组件实例刚被创建，无属性
created:              组件实例创建完成，有属性，没有DOM（el没有被挂载）,data已经完成，el生成了，还没有挂载。

beforeMount:          模板编译之前，有DOM，并没有把DOM挂载
mounted:              模板编译之后，数据都加载到页面上

beforeUpdate:         组件更新之前，数据已经更新了，但是没有挂载
updated:              组件更新之后，数据已经更新了，并且挂载

activated:            keep-alive,组件被激活时
deactivated:          keep-alive,组件被激活完成

beforeDestroy:        销毁之前，实例仍然完全可用
destroyed:            销毁完成，调用后，Vue 实例指示的所有东西都会解绑            定，所有的事件监听器会被移除，所有的子实例也会被销毁
             
执行了destroy操作，原来样式保留，后续就不再受vue控制了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期钩子函数</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			{{obj}}
			{{objn}}
			<button id="btn">更新</button>
			<button id="btn2">销毁</button>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					msg:"111",
					obj:{name:"lili"},
					objn:{name:"lisa"}
				},
				// beforeCreate(){//组件实例刚被创建，无属性
				// 	console.log(this.$el);
				// 	console.log(this.msg);
				// },
				// created(){//组件实例创建完成，有属性，没有DOM（el没有被挂载）,data已经完成，el生成了，还没有挂载。
				// 	console.log(this.$el);
				// 	console.log(this.msg);
				// 	this.obj["joba"]="ceoa";
				// },
				// beforeMount(){//模板编译之前，有DOM，并没有把DOM挂载
				// 	console.log(this.$el);
				// 	console.log(this.msg);
				// 	this.obj["job"]="ceo";
				// },
				// mounted(){//模板编译之后，数据都加载到页面上
				// 	console.log(this.$el);
				// 	console.log(this.msg);
				// 	this.obj["age"]=18;
				// },
				beforeUpdate(){//组件更新之前，数据已经更新了，但是没有挂载
					console.log(this.msg);
					if(this.msg<100){
						this.msg=110;
					}
				},
				updated(){//组件更新之后，数据已经更新了，并且挂载
					console.log(this.msg);
				},
				beforeDestroy(){//销毁之前，实例仍然完全可用
					console.log(this.msg);
				},
				destroyed(){//销毁完成，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
					console.log(this.msg);
				}
			})

		    var btn = document.getElementById("btn");
			btn.onclick=function(){
				vm.msg=18;
			}
			
			var btn2= document.getElementById("btn2");
			btn2.onclick=function(){
				vm.$destroy();
			}
		</script>
	</body>
</html>