vue 生命周期

最新推荐文章于 2024-09-24 08:43:56 发布

卟良亻

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/weixin_42595284/article/details/83024102

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<button @click = "msg='no'">修改msg</button>
		<h1 id="h1"> {{msg}} </h1>
	</div>
	<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:'#app',
			data:{
				msg:'ok'
			},
			methods:{
				show(){
					console.log('执行了show方法')
				}
			},
			// beforeCreate(){//第一个生命周期函数 表示在实例创建出来之前，会执行他
			// 	console.log(this.msg);
			// 	this.show();
			// 	//说明：data和methods中的方法还没有初始化
			// },
			created(){//第二个生命周期函数 
				console.log(this.msg);
				this.show();
				//说明：data和methods中的方法已经初始化
			},
			beforeMount(){//第三个生命周期函数 表示模板已经在内存当中编辑完了，尚未渲染在页面当中
				console.log(document.getElementById('h1').innerText);
				// this.show();
				//说明：在内存当中编辑完了，尚未渲染在页面当中
			},
			mounted(){//第四个生命周期函数 表示模板已经在渲染到页面当中
				console.log(document.getElementById('h1').innerText);
				// this.show();
				//说明：模板已经在渲染到页面当中
			},
			beforeUpdate(){//第五个生命周期函数
				console.log("页面上的内容"+document.getElementById('h1').innerText);
				console.log("内存data里面的内容"+this.msg)
				//说明：显示在页面当中的数据还未更新，而data的数据已经更新
			},
			updated(){//第六个生命周期函数
				console.log("页面上的内容"+document.getElementById('h1').innerText);
				console.log("内存data里面的内容"+this.msg)
				//说明：显示在页面当中的数据和data的数据已经同步更新
			},
			beforeDestroy(){//第七个生命周期函数，
				//实例销毁之前调用。在这一步，实例仍然完全可用。
			},
			destroyed(){//第八个生命周期函数，
				//Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
						所有的事件监听器会被移除，所有的子实例也会被销毁。
			},
		})
	</script>
</body>
</html>

在这里插入图片描述