Vue的生命周期以及钩子函数

最新推荐文章于 2023-04-14 11:30:00 发布

xwyjw

最新推荐文章于 2023-04-14 11:30:00 发布

阅读量97

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/qq_47443027/article/details/114783602

版权

Vue的生命周期总结

每个vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期

1.先拿张官方给出的vue的生命周期的图示
在这里插入图片描述
一.实际操作
可以直接将代码复制到软件进行查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
  	<h1>{{message}}</h1>
	<keep-alive>
		<my-components msg='你好' v-if='show'></my-components>
	</keep-alive>
  </div>
</body>
<script>
	var child={
		template:'<div>from child:{{msg}}</div>',
		props:['msg'],
		data:function(){
			return{
				childmsg:'child'
			}
		},
		deactivated:function(){
			console.log('component deactived!');
		},
		activated:function(){
			console.log('component actived')
		}
	};
	var arr=new Vue({
		  el:'#app',
		  data:function(){
			  return{
				  message:'vue的生命周期',
				  show:true
			  }
		  },
		  beforeCreate:function(){
		  	console.group('---beforeCreate创建前状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message
			}
			console.log(a)
		  },
		  created:function(){
		  	console.group('---created创建后状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message
			}
			console.log(a)
			console.log(this.$el)
		  },
		  beforeMount:function(){
		  	console.group('---beforeMount载入前状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message
			}
			console.log(a)
			console.log(this.$el)
		  },
		  mounted:function(){
		  	console.group('---mounted载入后状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message,
			}
			console.log(a)
			console.log(this.$el)
		  },
		  beforeUpdate:function(){
		  	console.group('---beforeUpdate更新前状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message,
			}
			console.log(a)
			console.log(this.$el)
			console.log('beforeUpdate == ' + document.getElementsByTagName('h1')[0].innerHTML);
		  },
		  updated:function(){
		  	console.log('---updated更新后状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message,
			}
			console.log(a)
			console.log(this.$el)
			console.log('updated == ' + document.getElementsByTagName('h1')[0].innerHTML);
		  },
		  beforeDestroy:function(){
		  	console.group('---beforeDestroy销毁前状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message,
			}
			console.log(a)
			console.log(this.$el)
		  },
		  destroyed:function(){
		  	console.group('---destroyed销毁后状态---')
			var a={
				'el': this.$el,
				'data': this.$data,
				'message': this.message,
			}
			console.log(a)
			console.log(this.$el)
		  },
		  components: {
		    'my-components': child
		  }
	})
</script>
</html>

咱们先看一下结构
①.首先我们创建了一个vue的实例命名为arr,并将其挂载到id为app的Dom元素上
②.局部注册了一个组件child并在根实例中将其注册使其可以在根实例的作用域作用
③.将子组件用包裹，为后面的测试做准备
2.beforeCreate、created、beforeMount、mounted相关
先上截图
在这里插入图片描述
根据此时浏览器的打印结果咱们能做出总结
①.beforeCreate执行时：el和data均为初始化，他们的值都是undefined
②.created执行时：data已经配置好了，已经获取到了arr.message的值，但el的值还是undefined
③beforeMount执行时：data和el君已经进行初始化，但是咱们点开div还是会发现message的值没有改变在这里插入图片描述
④mounted执行时：此时的el已经渲染完成并挂载到实例上了
小总结：beforeCreate：el和data均为进行初始化；created：data完成了数据的初始化，el没有；beforeMount：el和data完成了初始化；mounted：完成了挂载
3.与activated 和 destroyed相关
在前面的截图中我们发现了activated周期的钩子函数已经触发，这是因为子组件my-components被包裹，随之el的挂载的触发
接下来咱们就进行一下测试：由于咱们的子组件里面用到了v-if=“show”，此时我们在控制台输出arr.show=false，结果如下：
在这里插入图片描述
因为咱们在控制台修改了show的值，给他改成了false，所以咱们的子组件就停用，符合咱们预期的目标。
接下来我们就对Vue实例进行销毁，此时我们调用arr.$destroy()的方法对他进行销毁,测试的结果如下：

此时我们会发现实例依然存在，根据官方的文档的描述：Vue实例指示的所有东西都会解绑，所有的事件监听器都会移除，所有的子实例也会被销毁
在这里插入图片描述
此时咱们想改message的值发现dom并内有进行相应的相应，这就证实了咱么你之前的说法，这里的销毁并不指的是删除，而是解绑
4.beforeUpdate和updated相关的
先看结果
根据颜色的不同我们可以很准确的辨别出他们的区别
我们发现beforeUpdate和updated触发时，el的数据都已经渲染成功了（红色框）但是根据（蓝色框）我们能看出只有在updated钩子被调用的时候组件dom才被更新
小总结：在beforeUpdate时可以监听到data的变化，但是view层没有被渲染，数据没有变化，只有等到updated时，view层才被重新渲染，数据更新。