Vue生命周期

一、简述

1.  Vue 实例从创建到销毁的过程，就是生命周期。
2. 又名生命周期回调函数，生命周期函数，但最常说的还是生命周期钩子，他们是Vue在关键时刻帮我们调用的一些特殊名称的函数
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4. 声明周期函数中的this指向是vm或组件实例对象（vc）

二、生命周期流程

Vue生命周期包含四对重要的函数，也就是8个函数分别为：

1. 创建阶段：beforCreate(),created()
2. 挂载阶段：beforeMount(),mounted
3. 更新阶段：beforeUpdate(),updated()
4. 销毁阶段：beforeDestroy(),destroyed()

 1、创建阶段

创建阶段包括创建前（beforCreate()）,创建后（created()）

1. 首先在beforeCreate()之前，创建Vue实例对象，进行初始化：生命周期，事件，但是数据代理并未开始,紧接着进入beforeCreate()
2.  beforeCreate()阶段： 此时,因为并未进行数据代理，所以无法通过vm方法访问到data中的数据,methods中的方法
3. 然后进行初始化：数据监测，数据代理，进入created()阶段
4. created()阶段： 此时,可以通过vm访问data中的数据,methods中配置的方法
5. 紧接着Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容，进入到挂载阶段

2.挂载阶段

挂载阶段包括挂载前（beforeMount()），挂载后（mounted()）

1. beforeMount()阶段:此时页面上呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终都不奏效（仍然可以获取数据）

2. 然后将内存中的虚拟DOM转为真实DOM插入页面

3. mounted()阶段：此时页面上呈现的是经过Vue编译的DOM， 对DOM的操作均有效(尽可能避免),至此初始化过程结束，一般在这进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作

4. 当有人对数据进行修改时进入到更新阶段

 3.更新阶段

更新阶段包括更新前（beforeUpdate()），更新后（updated()）

1. beforeUpdate()阶段：此时数据是新的,但页面时旧的,即:页面尚未和数据保持同步

2.   然后根据新数据,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面的更新,即完成了Model->View的更新，进入updated()阶段

3. updated()阶段：此时,数据是新的,页面也是新的,即:页面和数据保持同步

4. 此时vm所有的:data,methods,指令等,都处于可用状态，进入销毁阶段

销毁阶段：

销毁阶段包括销毁前（beforeDestroy()），销毁后（destroyed()）

1. beforeDestroy()：在此阶段:关闭定时器,取消订阅消息,解绑自定义事件等收尾操作，在此阶段对数据及方法的操作都不会引发数据更新
2. destroyed()： 移除身上所有的组件实例与自定义事件监听器

至此生命周期完结 

三、总结

 常用的生命周期钩子:

1. mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作]
2. beforDestory:清除定时器,解绑自定义事件,取消订阅消息等[收尾工作]

  关于销毁Vue实例：

1.   销毁后借助Vue开发者工具看不到任何信息
2.   销毁后自定义事件会失效,但原生DOM事件依然有效
3.   一般不会在beforDestory操作数据,因为即使操作数据,也不会再触发更新流程了