vue之生命周期钩子

一、简单理解生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们可以通过生命周期钩子函数，在特定的生命周期阶段执行特定的操作。

二、常见的生命周期钩子

1. beforeCreate：实例创建之初，此阶段仅有一个data对象和events`，还未初始化其他功能
2. created：实例创建完成，data和methods都已初始化，但此时DOM还未生成
3. beforeMount：模板编译之前，此时DOM已经生成，但还没有挂载到页面
4. mounted：模板编译挂载完成，此时DOM已经挂载到页面，可以访问到DOM元素
5. beforeUpdate：实例的数据更新之前，此时DOM还是更新前的数据
6. updated：实例数据更新完成，此时DOM已经是最新的数据
7. beforeDestroy：实例销毁之前，此时实例仍然有效
8. destroyed：实例销毁完成，此时实例指示的DOM元素也被移除

函数	调用时间
beforeCreate	vue实例初始化之前调用
created	vue实例初始化之后调用
beforeMount	挂载到DOM树之前调用
mounted	挂载到DOM树之后调用
beforeUpdate	数据更新之前调用
updated	数据更新之后调用
beforeDestroy	vue实例销毁之前调用
destroyed	vue实例销毁之后调用

三、生命周期流程图

四、生命周期的四个阶段

1、创建阶段

主要用于组件创建时，获取数据设置组件。

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

beforeCreate创建前

官方描述：组件实例刚被创建，组件属性data、el等还未生效。 el 和 data 并未初始化
注意：this变量还不能使用，在data下的数据，和methods下的方法都不能获得到；

beforeCreate: function() {
					console.group('---创建前---');
					console.log("%c%s", "color:red;", "el:" + this.$el)//undefined
					console.log("%c%s", "color:red;", "data:" + this.$data)//undefined
					console.log("%c%s", "color:red;", "name:" + this.name)//undefined
					console.groupEnd('---创建前---');
				},

created创建完毕

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

created: function() {
					console.group('---创建完毕---');
					console.log("%c%s", "color:red;", "el:" + this.$el)//undefined
					console.log("%c%s", "color:red;", "data:" + this.$data)//初始化完毕[object object]
					console.log("%c%s", "color:red;", "name:" + this.name)//name展示信息
					console.groupEnd('---创建完毕---');
				},

2、挂载阶段

beforeMount挂载前

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

beforeMount: function() {
					console.group('---挂载前---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)//[object HTMLDivElement]
					console.log("%c%s", "color:red;", "data:" + this.$data)//已被初始化[object object]
					console.log("%c%s", "color:red;", "name:" + this.name)//已被初始化信息展示
					console.groupEnd('---挂载前---');
				},

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

实例化的两种挂载数据方式

方式一: 常用的挂载方式

var vm = new Vue({
  el:'#app',
  data:{
    ...
  }
})

方式二： 使用$mount

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

var vm = new Vue({
	data :{
		...
}
})
app.$mount('#app')

mount挂载完毕

官方描述：模板挂载完毕，el 被新创建的 vm.$el 替换。
解释：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。

mounted: function() {
					console.group('---挂载完毕---');
					console.log(this.$el)
					console.log("%c%s", "color:red;", "el:" + this.$el)//[object HTMLDivElement]
					console.log("%c%s", "color:red;", "data:" + this.$data)//已被初始化[object object]
					console.log("%c%s", "color:red;", "name:" + this.name)//已被初始化信息展示
					console.groupEnd('---挂载完毕---');
				},

此时，beforeMount的虚拟DOM便被真正的数据渲染出来了

挂载小结

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

3、更新阶段

beforeupdate数据更新之前

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('---更新前---');
				},


var vm = new Vue({
	el:'#app',
	data:{
	...
	};
	methods:{
	show:function(){
		this.message='更新后数据'
}
	}
})


在chrome控制台（Console）输入新数据

updated数据更新之后

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('---更新完毕---');
				},

加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
这里另外写了一个方法去改变message的值，触发更新：
methods:{
  show:function(){
    this.message='更新后数据'
  }
}

• 此后，每次更新数据都会触发该事件。

4、销毁状态

beforeDestroy-销毁前

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销毁完毕

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('---销毁完毕---');
				}

可以发现beforeDestory和destoryed打印出来的结果并没有什么特别，el的值data的数据依然在的。
这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom
销毁阶段 ：对 vue实例进行销毁。销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但原先生成的DOM元素还存在，可以这么理解，执行了destroy操作，后续就不再受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
      

六、生命周期归纳

（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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。