vue之生命周期钩子

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

①官方概念图 ②对生命周期图的标注


钩子列表

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


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


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

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

数据挂载方式
在实例化Vue的时候，两种方式挂载数据

方法1：最常用的方式

文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

数据挂载方式
在实例化Vue的时候，两种方式挂载数据

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


挂载阶段
beforeMount和mounted两者主要区别在于模板是否编译和挂载了

①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了，但是只是占了坑，挂上了编译前的模板，即虚拟DOM技术（Virtual DOM）
beforeUpdate
beforeUpdate 数据更新之前
点击按钮 或者 在chrome控制台输入新数据

updated
updated数据更新之后

更新阶段
加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
这里另外写了一个方法去改变message的值，触发更新：

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



beforeDestroy
beforeDestroy销毁前


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



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

此时页面数据便不再响应更新。
OM销毁–页面消失；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