开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
一、vue的生命周期是什么
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程,例如 : 需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的函。
- beforeCreate（创建前）
- created （创建后）
- beforeMount (载入前)
- mounted （载入后）
- beforeUpdate （更新前）
- updated （更新后）
- beforeDestroy（ 销毁前）
- destroyed （销毁后）
2.vue 生命周期函数就是vue实例在某一个时间点会自动执行的函数
- vue 对象创建之前触发的函数（beforeCreate）
- vue 对象创建完成触发的函数(Created)
- vue 对象开始挂载数据的时候触发的函数(beforeMount)
- vue 对象挂载数据的完成的时候触发的函数(Mounted)
- vue 对象中的data数据发生改变之前触发的函数 (beforeUpdate)
- vue 对象中的data数据发生改变完成触发的函数(Updated)
- vue 对象销毁之前触发的函数 (beforeDestroy)
- vue 对象销毁完成触发的函数(Destroy)
3.vue生命周期的作用
vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和dom渲染两大重要功能。
4.vue每个生命周期的详细介绍
实例挂载阶段
- beforeCreate() {}, // vue创建前
此阶段为实例初始化之后，this指向创建的实例，数据观察,数据监听事件机制都未形成，不能获得DOM节点。data，computed，watch，methods 上的方法和数据均不能访问，注：date和methods的数据都还未初始化。
- created() {}, // vue创建后
此阶段为实例初始化之后，data、props、computed的初始化导入完成， 注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作能访问 data computed watch methods 上的方法和数据，初始化完成时的事件写这个里面，此阶段还未挂载DOM。
- beforeMount() {}, // vue载入前
此阶段执行时，模板已经在内存中编译好了，但是未挂载到页面中，（页面还是旧的）注：这个阶段是过渡性的，一般用不到
- mounted() {}, // vue载入后
(完成创建vm.$el，和双向绑定)； 只要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离了创建阶段， 进入到了运行阶段。
数据更新阶段
- beforeUpdate() {}, // vue更新前
当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时date数据是最新的，页面尚未和最新数据数据保持同步。但是dom中的数据会改变，这是vue双向数据绑定的作用，可在更新前访问现有的dom，如手动移出添加的事件监听器。
- Updated() {}, // vue更新后
Updated执行时数据已经保持同步了，都是最新的，完成虚拟DOM的重新渲染和打补丁。组件dom已完成更新，可执行依赖的dom操作。
注意：不要在此函数中操作数据（修改属性），否则就会陷入死循环。
销毁阶段
- beforeDestroy() {}, // vue销毁前
当执行beforeDestroy的时候，vue 实例就已经从运行阶段进入到销毁阶段了。实例上的所有date和methods以及过滤器和指令都是处于可用状态，此时还没有真正的执行销毁过程。
- Destroyed() {}, // vue销毁后
当执行到destroted函数的时候，组件已经完全销毁（渣都不剩），此时组件中的所有的数据，方法，指令，过滤器...都已经销毁（不可用了）。
生命周期（其他三个钩子函数）
还有2个钩子函数是与组件一起使用的
- activated() {}, // 被keep-alive 缓存的组件激活时调用。
和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候
- deactivated() {}, // 被keep-alive 缓存的组件停用时调用。
实例没有被激活时。
2.5.0新增的钩子函数，主要用来错误捕获
- errorCaptured(a, b, c) { console.log(a, b, c, 'errorCaptured') }, // 错误调用
当子孙组件出错时，会调用这个钩子函数
二、生命周期图表
【有修改请留言】
