初识VUE第三天（VUE之生命周期钩子）

约定不等于承诺〃 2023-06-06 12:18 15阅读 0赞

# 什么是生命周期？ #

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

### 以下是一个官方的概念图 做了详细的标注 ###

![在这里插入图片描述][20191011192637326.png]

## 钩子列表 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

### beforeCreate ###

（1）beforeCreate

*  官方描述：组件实例刚被创建，组件属性data、el等还未生效。
 *  el 和 data 并未初始化
 *  注意：this变量还不能使用，在data下的数据，和methods下的方法都不能获得到；  
    ![在这里插入图片描述][20191011192804364.png]  
    ![在这里插入图片描述][2019101119281048.png]

### created ###

（2）created

*  官方描述：实例已经创建完成之后被调用，然而，挂载阶段还没开始，$el 属性目前不可见。
 *  data已经初始化，但el并未初始化
 *  完成了 data 数据的初始化，但el没有初始化，所以这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；  
    ![在这里插入图片描述][20191011192922100.png]  
    ![在这里插入图片描述][20191011192930207.png]

## 创建阶段 ##

*  创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了，具体看看console的内容：  
    ![在这里插入图片描述][20191011193110230.png]  
    ![在这里插入图片描述][20191011193115209.png]
 *  数据很明显，beforeCreate触发的时el、data都没初始化，但到created的时候虽然el依然没有初始化，但是data已经生成了，并且成功将message的值绑定上。

### beforeMount ###

（3）beforeMount

*  官方描述：在挂载开始之前被调用，完成了 el 和 data 初始化。
 *  el 和 data 均已初始化 。  
    ![在这里插入图片描述][2019101119320812.png]  
    ![在这里插入图片描述][20191011193215250.png]
 *  在标红处，我们能发现el还是 \{ \{message\}\}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

## 数据挂载方式 ##

*  在实例化Vue的时候，两种方式挂载数据  
    方法1：最常用的方式  
    ![在这里插入图片描述][20191011193254267.png]  
    文档中最常用的做法就是直接在实例化的时候利用el:"\#app"来挂载元素  
    方法二：$mount  
    ![在这里插入图片描述][2019101119331693.png]

利用$mount挂载的方法有一个很大的好处，就是将实例化的内容和对应HTML的关联分开，可以更直观的展现。

### mounted ###

（4）mounted

*  官方描述：模板挂载完毕，el 被新创建的 vm.$el 替换。
 *  解释：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行  
    ![在这里插入图片描述][20191011193408770.png]  
    ![在这里插入图片描述][20191011193415577.png]
 *  此时，beforeMount的虚拟DOM便被真正数据渲染了出来。

## 挂载阶段 ##

*  beforeMount和mounted两者主要区别在于模板是否编译和挂载了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
    ①el是用来告诉实例在那个元素上进行挂载。  
    ②beforeMount触发的时候el已经初始化了，但是只是占了坑，挂上了编译前的模板，即虚拟DOM技术（Virtual DOM）

## beforeUpdate ##

#### beforeUpdate 数据更新之前 ####

点击按钮  
![在这里插入图片描述][20191011193537243.png]  
![在这里插入图片描述][20191011193541258.png]  
或者 在chrome控制台输入新数据  
![在这里插入图片描述][20191011193600584.png]

### updated ###

updated数据更新之后  
![在这里插入图片描述][2019101119362222.png]  
![在这里插入图片描述][20191011193627332.png]

### 更新阶段 ###

*  加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
 *  这里另外写了一个方法去改变message的值，触发更新：  
    ![在这里插入图片描述][20191011193739959.png]  
    ![在这里插入图片描述][2019101119374726.png]  
    此后，每次更新数据都会触发该事件。

### beforeDestroy ###

*  beforeDestroy销毁前  
    ![在这里插入图片描述][20191011193818136.png]  
    ![在这里插入图片描述][20191011193828488.png]

### destroyed ###

*  destroyed销毁完毕  
    ![在这里插入图片描述][20191011193911263.png]  
    ![在这里插入图片描述][20191011193921374.png]  
    可以发现beforeDestory和destoryed打印出来的结果并没有什么特别，el的值data的数据依然在的。  
    这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom

## 销毁阶段 ##

*  对 vue实例进行销毁。销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。  
    ![在这里插入图片描述][20191011194204271.png]
 *  此时页面数据便不再响应更新。
 *  DOM销毁–页面消失；Vue销毁–销毁绑定

## 生命周期小结 ##

*  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实例从创建到销毁的过程，将这个过程中的一些关键点抽取出来，简化为下面这个流程图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# 总结 #

（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>demo</title>
    		<style>
    
    		</style>
    		<script src="../vue10.9练习/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>

#### 如有问题或者疑问请留言联系小编！！！！ ####

#### 感谢来访！！！！！！！ ####

[20191011192637326.png]: /images/20230601/2fb27cd508e647b1a4b90a84339923ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230601/fdc8ca35002a4e7c963eaedab8e2e427.png
[20191011192804364.png]: /images/20230601/83aa18c3acac4d5380e9a77ea6ec0f82.png
[2019101119281048.png]: /images/20230601/f9c79990521749c3b15d1cacd1352cc9.png
[20191011192922100.png]: /images/20230601/7c64635cda104127b3a2f16f2bde355d.png
[20191011192930207.png]: /images/20230601/be6f6dd6837a4d9b84a93b76db71ef61.png
[20191011193110230.png]: /images/20230601/8fb6bedff90e4bdcaf1702b2cbad8539.png
[20191011193115209.png]: /images/20230601/3b9d50f6e7c8418895ba648338a0ac41.png
[2019101119320812.png]: /images/20230601/26ef58692adb4842b79a8eb5e551d3c8.png
[20191011193215250.png]: /images/20230601/dd3e7b8377594d709d0115e7eb24a357.png
[20191011193254267.png]: /images/20230601/9f0df9a616c84ff69752a294307b693e.png
[2019101119331693.png]: /images/20230601/d2bf58e9a86442cfaa67e4899fde350f.png
[20191011193408770.png]: /images/20230601/8f8c5eb644af4413a25a1d9f68740023.png
[20191011193415577.png]: /images/20230601/d897a12ad71647a38baf80173a57a841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230601/68c2a5c2a9fc409e92a1fcabb1cc3e5f.png
[20191011193537243.png]: /images/20230601/33cc78b3a8b348c4bf51dc025add6c18.png
[20191011193541258.png]: /images/20230601/b7ddaeb3ec804caebd2866434d5c5bb0.png
[20191011193600584.png]: /images/20230601/6191d3586d7c413c9a5012ae93d960b7.png
[2019101119362222.png]: /images/20230601/3756254b6b15460da05830d434799828.png
[20191011193627332.png]: /images/20230601/e1aac82f1fef4d58bc67f18365ab12e7.png
[20191011193739959.png]: /images/20230601/6de575953a414e998bdae5dfc25d6437.png
[2019101119374726.png]: /images/20230601/e2e574e9d39d4d86aa513971d04a4e7b.png
[20191011193818136.png]: /images/20230601/b9d123a9d1d34fe49bd2027438d72d96.png
[20191011193828488.png]: /images/20230601/800ed9a02a0f4d919833f393a1674519.png
[20191011193911263.png]: /images/20230601/a3370d4e3037437daa94ae4c22d09208.png
[20191011193921374.png]: /images/20230601/26bb11adc0a047ee911d757de2176f22.png
[20191011194204271.png]: /images/20230601/e4d63141897642fdbcdc6b69cde220cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230601/4e3e2520234f4f389774e5dbb2693951.png