vue.js生命周期函数

news2024/11/15 4:35:42

Vue生命周期

beforecreate : 举个例子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>vue生命周期</title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{message}}</h2>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"xiaonaihu"
				},
				beforeCreate: function(){
				    console.group('beforeCreate 创建前状态===============》');
				    console.log("%c%s", "color:red" , "el     : " + this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);  
				},
				created: function(){
				    console.group('created 创建完毕状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				beforeMount: function(){
				    console.group('beforeMount 挂载前状态===============》');
				    console.log("%c%s", "color:red","el     : " + (this.$el));
				    console.log(this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				mounted: function(){
				    console.group('mounted 挂载结束状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);    
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				beforeUpdate: function(){
				    console.group('beforeUpdate 更新前状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);   
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				updated: function(){
				    console.group('updated 更新完成状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el); 
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				beforeDestroy: function(){
				    console.group('beforeDestroy 销毁前状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);    
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				destroyed: function(){
				    console.group('destroyed 销毁完成状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);  
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message)
				}
			});
		</script>
	</body>
</html>