欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue.js生命周期

程序员文章站 2022-07-01 19:20:22
...

Vue.js之生命周期

学习到vue阶段的同学，总是会被vue的生命周期钩子函数搞混，接下来我就带着大家一步步去理清vue的生命周期钩子函数.

什么是vue的生命周期呢? 其实就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、创建后（created）、挂载前（beforeMount）、挂载后（mounted）、更新前（beforeUpdate）、更新后（update）、销毁前（beforeDestroy）、销毁后（destroyed）,以上各个阶分别会有对应的“钩子函数”,然后我们在相应的“钩子函数”去完成一些事情而已.

按照官网给出的示例图,我们可以用代码演示,每个钩子触发时,相应的整个vue实例发生的变化.

Vue.js生命周期

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue.js-生命周期</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="container">
		<h3>{{greeting}}</h3>
		<button @click="updateFunc">更新实例</button>
		<button @click="destroy">销毁实例</button>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.js"></script>
	<script type="text/javascript">
		/**
		 *   Vue实例生命周期中的钩子函数，是作为实例的选项存在的
		 */
		var app =  new Vue({
			el:"#container",
			data:{
				greeting:"hello,world!"
			},
			methods:{
				// 数据更新，会触发beforeUpdate以及update钩子函数
				updateFunc:function(){
					this.greeting = "嗨，大家好！"
				},
				// 销毁实例，会触发beforeDestroy和destroyed钩子函数
				destroy:function(){
					this.$destroy()//实例.$destroy()，用来销毁实例，释放内存空间
				}
			},
			beforeCreate:function(){
	            console.log("el     : " + this.$el); //undefined
	            console.log("data   : " + this.$data);//undefined
				console.log("beforeCreate钩子:此时Vue实例被创建，但是却没有开始观测(并监视)数据和初始化事件，也就是说此时只是有一个Vue实例的空壳子")
			},
			created:function(){//常用，可以用来进行数据的初始化
	            console.log("el     : " + this.$el); //undefined
	            console.log("data   : " + this.$data);//已经初始化
	            console.log("this.greeting   : " + this.greeting);//已经初始化
				console.log("created钩子:此时Vue实例已经被创建，而且完成了数据的观测和事件的初始化，watch/event事件已经配置,但还没进行挂载，$el属性还看不到")
			},
			beforeMount:function(){//已经初始化 
	            console.log("this.greeting   : " + this.greeting);//已经初始化
	            console.log("div   : " + document.getElementsByTagName('H3')[0].innerHTML);//此时为虚拟DOM 模板还未编译 所以拿到的只是定义好的表达式
				console.log("模板编译之前，此时还没有将数据挂载到元素上，data和$el已经存在，但DOM仍为虚拟DOM，还未完全加载完")
			},
			mounted:function(){//常用
	            console.log("this.greeting   : " + this.greeting);//已经初始化
	            console.log("div   : " + document.getElementsByTagName('H3')[0].innerHTML);// 真实DOM已经加载完 模板也编译完成 所以能拿到文本内容
				console.log("此时DOM已经加载完，数据挂载到元素上，模板已经完成编译，开始渲染界面，并显示到页面上")
			},
			beforeUpdate:function(){//会用  加载loading效果时
				console.log("实例更新之前,在这里所谓的更新，实例上任意一部分更新均会触发此函数，在这里是更新了数据")
			},
			updated:function(){//会用  当数据更新需要做处理的时候
	            console.log("this.greeting   : " + this.greeting + "数据改变啦");//已经初始化 数据更新会调用这个函数
				console.log("实例更新之后")
			},
			beforeDestroy:function(){
				console.log("实例销毁之前,所谓的销毁就是该实例所拥有的内存空间被释放和销毁")
			},
			destroyed:function(){
				console.log("实例销毁之后，实例所有指示的东西都会解绑,且子实例也会被销毁")
			}
		})
	</script>
</body>
</html>

通过代码,我们就能了解每个生命周期钩子函数之间发生了什么变化,这样一看是不是就觉得很简单呢~

上一篇： vue.js生命周期

下一篇： Vue——render函数在ElementUi中的应用

推荐阅读