vue生命周期

1、生命周期图示

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

2、生命周期几大阶段：

每一个组件或者实例都会经历一个完整的生命周期

• 初始化
• 运行中
• 销毁

2.1、八大周期每个周期执行的过程

• 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。
• 在created阶段，vue实例的数据对象有了，el还没有。
• 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。
• 在mounted阶段，vue实例挂载完成，data成功渲染。
• beforeUpdate (更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
• updated （更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
• beforeDestroy (销毁前） 在实例销毁之前调用。实例仍然完全可用。
• destroyed (销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。