Vue实例的生命周期

一、Vue生命周期原理图

二、Vue生命周期拆分

1. 初始化显示

 - beforeCreate()
 - created()
 - beforeMount()
 - mounted()

2. 更新状态

 - beforeUpdate()
 - updated()

3. 销毁 vue实例：vm.$destory()

 - beforeDestory()
 - destoryed()

三、Vue生命周期详解

1.初始化阶段

（1）beforeCreate()

此时无法通过vm访问到data中的数据、methods中的方法。

（2）created()

此时可以通过vm访问到data中的数据、methods中配置的方法。

（3）beforeMount()

• 页面呈现的是未经Vue编译的DOM结构。
• 所有对DOM的操作，最终都不奏效。

（4）mounted()

• 此时页面呈现的是未经Vue编译的DOM结构。
• 所有对DOM操作均有效（尽可能避免）。
• 到这里初始化过程结束，一般在此进行：开启定时器、发生网络请求、订阅消息、绑定自定义事件等初始化操作。

2.更新阶段

（1）beforeUpdate()

此时页面尚未于数据保持同步（即数据是新的，但页面还是旧的）。

（2）updated()

此时页面和数据保持同步（即数据和页面都是新的）。

3.销毁阶段（调用vm.$destory()）

（1）beforeDestory()

• 此时vm中所有的data、methods、指令等等东西都处于可用状态。
• 这时一般进行：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

（2）destroyed()

• 完全销毁一个实例。
• 清理它与其它实例的连接，解绑它的全部指令及事件监听器。