粗略了解Vue的生命周期

最新推荐文章于 2025-09-05 10:43:37 发布

原创最新推荐文章于 2025-09-05 10:43:37 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

VueJS快速入门专栏收录该内容

12 篇文章

订阅专栏

粗略了解生命周期

开头来一张官方文档上的图片先

在这里插入图片描述
可以看出在vue的整个生命周期中会有很多钩子函数提供给我们，然我们可以在不同的生命周期时刻进行操作，这些钩子函数分别有：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

首先先来一个简单案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--导包-->	
	</head>
	<body>
		<div id="app">
			<input type="button" @click=""/>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"数据"
				},
				methods:{
					fun:function(){
						console.log("点击事件");
					}
				},
				beforeCreate:function(){
					console.log("----------------beforeCreate----------------");
					console.log("对象"+this);
					console.log("数据"+this.message);
					console.log("方法"+this.fun());
				},
				created:function(){
					console.log("----------------created----------------");
					console.log("对象"+this);
					console.log("数据"+this.message);
					console.log("方法"+this.fun());
				},
				beforeMount:function(){
					console.log("----------------beforeMount----------------");
					console.log("对象"+this);
					console.log("数据"+this.message);
					console.log("方法"+this.fun());
				},
				mounted:function(){
					console.log("----------------mounted----------------");
					console.log("对象"+this);
					console.log("数据"+this.message);
					console.log("方法"+this.fun());
				}
			})
		</script>
	</body>
</html>