Vue之生命周期钩子

Vue之生命周期钩子

首先解释一下什么是生命周期？
（1）Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染—更新—渲染—卸载等一系列过程，我们称之为生命周期。
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

概念图

①官方概念图

②对生命周期图的标注

生命周期（四大）八个阶段
（1）beforeCreate 创建前
（2）created 创建完毕
（3）beforeMount 挂载前
（4）mounted 挂载完毕
（5）beforeUpdate 更新前
（6）updated 更新完毕
（7）beforeDestroy 销毁前
（8）destroyed 销毁完毕

生命周期小结

（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

注意：this.$destroy()—销毁Vue实例（销毁的不是数据，而是Vue的特性：双向绑定）
重点：销毁指的是解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom

通俗来说 vue的生命周期就是vue实例从创建到销毁的过程，将这个过程中的一些关键点抽取出来，简化为下面这个流程图：