【Vue2】生命周期——钩子函数

钩子函数：在一个Vue实例从创建到销毁的过程自动执行的函数。

 1、分析生命周期

1）初始化阶段：

beforeCreate（）

生命周期中第一个函数，在该函数执行时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作，Vue实例中还没有Data，el，methods相关属性。

created（）

生命周期的第二个函数，在该函数执行时Vue实例已经初始化data属性和methods中相关方法，可以在此阶段调取后端数据了

beforeMount（）

生命周期的第三个函数，在该函数进行模板编译，生成虚拟dom

mounted（）

生命周期的第四个函数，在该函数将数据渲染到页面上，生成真实dom

2）运行阶段

beforeUpdate（）

生命周期的第五个函数，数据更新时触发该函数，该函数执行时Vue实例中data数据变化，但页面数据仍为旧数据，即data数据与页面数据不同步

updated（）

生命周期的第六个函数，数据更新触发，但时机点位于beforeUpdated后，此时页面数据与Vue实例中data数据能够保持一致。

3）销毁阶段

beforeDestory（）

生命周期的第七个函数，该函数执行时，Vue实例中所有数据、methods、component还未销毁

destoryd（）

生命周期的第八个函数，该函数执行时，Vue实例彻底销毁

2、钩子函数常见的使用场景

1）推荐在created（）中发送请求，对服务端接口进行调用，此时data数据已经创建，可以获取服务端数据对其进行赋值，相比beforeMount（）和mounted(),created（）能更快获取到服务端数据，减少页面loading 时间；

2）在 mounted（）中，Vue将编译好的模板挂在到页面上，此时为真实DOM，可以对DOM进行操作。此时可以做启动定时器、绑定自定义事件、订阅消息等初始化操作。

3）beforeDestory（）可进行清除定时器、解绑自定义事件、取消消息订阅等操作。

注意=>生命周期的this指向Vue组件实例或者vm