Vue生命周期

一.什么是生命周期?

简单的来讲，在Vue中实例从创建到销毁的过程就是生命周期，即指从创建，初始化数据，编译模板，挂在DOM→渲染，更新→渲染，卸载等一系列过程

二.生命周期有哪些？

Vue生命周期可分为8个阶段：创建前后，载入前后，更新前后，销毁前后，以及一些特殊场景的生命周期

生命周期	描述
beforCreate	组件实例创建之前
created	组件实例创建完成
beforeMount	组件挂载前
mounted	组件挂载实例完成
beforeUpdate	组件数据更新之前
updated	组件数据更新之后
beforeDestory	组件实例销毁前
destoryed	组件实例销毁之后
activeted	keep-alive缓存的组件激活时
deactivated	keep-alive缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误是调用

三.生命周期具体分析

beforeCreate>created

初始化Vue实例，进行数据观测

created

完成数据观测，属性与方法的运算，watch event事件回调的配置

可调用methods中的方法，访问和修改data数据出发响应式渲染dom，可通过computed和watch完成计算

此时vm.$el并没有被创建

created>beforeMount

判断是否存在el选项，若不存在则停止编译，知道调用vm.$mount(el)才会继续编译

优先级:render>template>outerHTML

vm.el获取到的是挂载dom的

beforeMount

在此阶段可获取到vm.el

此阶段vm.el虽已完成dom初始化，但并未挂载在el选项上

beforeMount>mounted

此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的dom

mounted

vm.el已完成dom的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

更新的数据必须是被渲染在模板上的(el.template,rander之一)

此时view层还未更新

若在beforeUpdate中再次修改数据，不会再触发更新方法

update

完成view层的更新

若在update中修改数据的话会再次触发更新方法

beforeDestory

实例被销毁前调用，这时候的实例属性和方法仍可被访问

destoryed

彻底销毁一个实例，可清理它与其它实例的连接，解绑他的全部指令与事件监听器

并不能完全清除dom，仅仅销毁实例

三.生命周期的使用场景

生命周期	描述
beforeCreate	执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created	组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	未执行渲染，更新，dom创建
mounted	初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate	更新前，可用于获取更新前各种状态
updated	更新后，所有状态已更新到最新
beforeDestroy	销毁前，可用于一些定时器订阅的取消
destoryed	组件已销毁，作用同上