一、简单理解生命周期
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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。