Vue生命周期钩子

最新推荐文章于 2024-02-23 17:22:22 发布

原创最新推荐文章于 2024-02-23 17:22:22 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

Vue实例从创建到销毁的过程称为生命周期，包括创建、挂载、更新和销毁四个阶段。每个阶段都有对应的钩子函数，如beforeCreate、created、beforeMount、mounted等，这些钩子可用于在特定时间点执行操作。在Vue的生命周期中，可以利用钩子对数据、DOM进行操作，理解生命周期对于优化Vue应用至关重要。

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

钩子列表
在这里插入图片描述

一共分为四个阶段：

（一）创建阶段

创建的标志点是New
vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了，具体看看console的内容：

在这里插入图片描述

数据很明显，beforeCreate触发的时el、data都没初始化，但到created的时候虽然el依然没有初始化，但是data已经生成了，并且成功将message的值绑定上。

（1）beforeCreate
官方描述：组件实例刚被创建，组件属性data、el等还未生效。
el 和 data 并未初始化
注意：this变量还不能使用，在data下的数据，和methods下的方法都不能获得到；
在这里插入图片描述
（2）created
实例已经创建完成之后被调用，然而，挂载阶段还没开始，$el 属性目前不可见。
data已经初始化，但el并未初始化
完成了 data 数据的初始化，但el没有初始化，所以这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；
在这里插入图片描述

（二）挂载阶段

（1） beforeMount

官方描述：在挂载开始之前被调用，完成了 el 和 data 初始化。
el 和 data 均已初始化。

在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

一共两种挂载方式

方法1：最常用的方式
文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素
方法二：$mount
利用$mount挂载的方法有一个很大的好处，就是将实例化的内容和对应HTML的关联分开，可以更直观的展现。

（2）mounted

官方描述：模板挂载完毕，el 被新创建的 vm.$el 替换。
解释：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。
此时，beforeMount的虚拟DOM便被真正数据渲染了出来。
beforeMount和mounted两者主要区别在于模板是否编译和挂载了

①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了，但是只是占了坑，挂上了编译前的模板，即虚拟DOM技术（Virtual DOM）

（三）更新阶段

beforeUpdate 数据更新之前

在这里插入图片描述

在chrome控制台输入新数据

updated数据更新之后

更新阶段

加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
这里另外写了一个方法去改变message的值，触发更新：
此后，每次更新数据都会触发该事件。

（四）销毁阶段
beforeDestroy销毁前
在这里插入图片描述

destroyed销毁完毕
在这里插入图片描述

可以发现beforeDestory和destoryed打印出来的结果并没有什么特别，el的值data的数据依然在的。
这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom

销毁阶段

对 vue实例进行销毁。销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

在这里插入图片描述

此时页面数据便不再响应更新。

生命周期小结

（1）创建阶段：主要用于组件创建时，获取数据设置组件。

beforeCreate组件实例刚被创建，组件属性data、el等还未生成
created（能够访问创建成功的组件实例，但不能访问模板，el 或 DOM）

（2）挂载阶段：主要用于访问组件 DOM

beforeMount在挂载开始之前被调用，完成了 el 和 data 初始化
mounted（能够访问组件模板，模板挂载完毕，el 被新创建的 vm.$el 替换）

（3）更新阶段：数据变化，组件重新渲染。

beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）
updated（能够访问 DOM）

（4）销毁阶段：（用于销毁组件，做清理工作）

beforeDestory（销毁前还能访问组件实例）
destoryed销毁完毕，销毁实例，清理实例连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom
通俗来说 vue的生命周期就是vue实例从创建到销毁的过程，将这个过程中的一些关键点抽取出来，简化为下面这个流程图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue生命周期钩子</title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			<p>{{name}}</p>
			<button @click="destoryFn">按钮</button>
		</div>
		<script type="text/javascript">
			/*1、创建根实例*/
			var demo = new Vue({
				/*2、挂载根实例到元素上*/
				el: '#demo',
				/*3、绑定数据*/
				data: {
					name: '熊大'
				},
				methods: {
					destoryFn: function() {
						demo.$destroy();
					}
				},
				beforeCreate: function() {
					console.group('---创建前---');
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---创建前---');
				},
				created: function() {
					console.group('---创建完毕---');
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---创建完毕---');
				},
				beforeMount: function() {
					console.group('---挂载前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---挂载前---');
				},
				mounted: function() {
					console.group('---挂载完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---挂载完毕---');
				},
				beforeUpdate: function() {
					console.group('---更新前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---更新前---');
				},
				updated: function() {
					console.group('---更新完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---更新完毕---');
				},
				beforeDestroy: function() {
					console.group('---销毁前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---销毁前---');
				},
				destroyed: function() {
					console.group('---销毁完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---销毁完毕---');
				}
			})
		</script>
	</body>
</html>

总结

（1）什么是生命周期？

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

（2）生命周期钩子选项/生命周期钩子？

就是生命周期事件的别名而已。

（3）生命周期钩子 = 生命周期函数 = 生命周期事件

（4）主要的生命周期函数分类：

①创建期间的生命周期函数 ②运行期间的生命周期函数 ③销毁期间的生命周期函数

（5）创建期间的生命周期函数：

①beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
②created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
③beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
④mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

（6）运行期间的生命周期函数：

①beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
②updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

（7）销毁期间的生命周期函数：

①beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
②destroyed：Vue 实例销毁后调用。调用后，Vue
实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue生命周期钩子</title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			<p>{{name}}</p>
			<button @click="destoryFn">按钮</button>
		</div>
		<script type="text/javascript">
			/*1、创建根实例*/
			var demo = new Vue({
				/*2、挂载根实例到元素上*/
				el: '#demo',
				/*3、绑定数据*/
				data: {
					name: '熊大'
				},
				methods: {
					destoryFn: function() {
						demo.$destroy();
					}
				},
				beforeCreate: function() {
					console.group('---创建前---');
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---创建前---');
				},
				created: function() {
					console.group('---创建完毕---');
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---创建完毕---');
				},
				beforeMount: function() {
					console.group('---挂载前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---挂载前---');
				},
				mounted: function() {
					console.group('---挂载完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---挂载完毕---');
				},
				beforeUpdate: function() {
					console.group('---更新前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---更新前---');
				},
				updated: function() {
					console.group('---更新完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---更新完毕---');
				},
				beforeDestroy: function() {
					console.group('---销毁前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---销毁前---');
				},
				destroyed: function() {
					console.group('---销毁完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)
					console.log("%c%s", "color:red;", "data:" + this.$data)
					console.log("%c%s", "color:red;", "name:" + this.name)
					console.groupEnd('---销毁完毕---');
				}
			})
		</script>
	</body>
</html>

以上是小编对Vue生命周期钩子的理解以及编写的代码，如有任何问题请随时联系小编！