Vue生命周期函数--8个钩子函数

最新推荐文章于 2024-04-10 18:01:45 发布

lll_handsome_boy

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量439

点赞数

分类专栏：前端文章标签：用于Vue初学者

本文链接：https://blog.csdn.net/lll_handsome_boy/article/details/96716488

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue生命周期函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue-2.6.10.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p id="massage">{{msg}}</p>
			<input type="button" name="" id="" value="修改msg" @click="msg='no'" />
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					msg:"ok",
				},
				methods:{
					show(){
						console.log("我是methods")
					}	
				},
				 beforeCreate(){
					 //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
					 //注意:在beforeCreate的生命周期函数执行的时候,data和methods中的数据都还没有初始化.
					// console.log("我是beforeCreate"+this.msg)
					// this.show()
				 },
				 created(){
					 //这是遇到的第二个生命周期函数
					 //data 和methods 都已经被初始化好了.
					 //如果要调用methods中的方法,或者操作data中的数据,最早只能在created中操作
					// console.log("我是created"+this.msg)
					//  this.show()
				 },
				 beforeMount(){
					//这是遇到的第3个生命周期函数,表示模板已经子啊内存中编译完成了,但是尚未把模板渲染到页面中
					//在beforeMount执行的时候,页面中的元素还没有被真正替换过来,只是之前写的一些模板字符串.
					//console.log("我是beforeMount："+document.getElementById("massage").innerText)
				 },
				 mounted(){
					 //这是遇到的第4个周期函数,表示,内存中的模板,已经真实的挂载到页面中,用户已经可以看到渲染好的页面了.
					 //注意: mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示实例已经被完全创建好了,此时,如果没有
					 //其他操作的化,这个实例,就静静的躺在我们的内存中,一动不动
					//console.log("mounted："+document.getElementById("massage").innerText)
				 },
				 beforeUpdate(){
					 //console.log("beforeUpdate+页面中的msg:"+document.getElementById("massage").innerText)
					 //console.log("data中的msg:"+this.msg)
					 //当执行beforeUpdate的时候，data中的数据是最新的，但是页面中显示的数据还没有更新
				 },
				 updated(){
					  //console.log("updated+页面中的msg:"+document.getElementById("massage").innerText)
					  //console.log("data中的msg:"+this.msg)
					  //updated事件执行的时候,页面和data的数据都已经保持同步了,都是最新的
				 },
				  beforeDestroyed(){
				 		//当执行	beforeDestroyed时候，Vue实例已经从运行阶段进入到销毁阶段，但是	
						//实例上的所有的methods,以及过滤器,指令.....都还处于可用状态
				 },
				 destroyed(){
					 //当执行destroyed函数时候,组件已经全部销毁,
					 //此时实例上的所有的methods,以及过滤器,指令.....都已经不可用
				 }
			});
		</script>
	</body>
</html>