鉴于总结别人的面试经验，当提到vue项目的时候或者公司做vue项目的时候，笔试题或者面试题都会问问vue的生命周期，然而平时的项目中却很少关注这件事，今天来总结一下：

此处先挂上官网的

生命周期图

vue的生命周期（开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、卸载）主要分为八个阶段：

beforeCreate（创建前） created（创建后） beforeMount（载入前） mounted（载入后） beforeUpdate（更新前）, updated（更新后） beforeDestroy（销毁前） destroyed（销毁后）

beforeCreate data 和 $el 都没有初始化 全部为 undefined
created data 初始化完成，但 $el 没有初始化
beforeMount data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载 eg： <div>{{message}}</div>
mounted data 和 $el 均已存在，并且 DOM 加载完成 ，完成挂载

当data中数据发生改变时触发update相关函数
beforeUpdate 渲染完成，并监测到data发生变化，在变化的数据重新渲染视图之前会触发，这也是重新渲染之前最后修改数据的机会
updated 监测到data发生变化，并完成渲染更新视图之后触发

beforeDestory 实例销毁之前调用 ， 实例仍然完全可用。
destroyed 实例销毁后调用。调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated钩子函数。

vue生命周期的应用场景：

beforeCreate 可以在此时加一些loading效果，在created时进行移除

created 需要异步请求数据的方法可以在此时执行，完成数据的初始化

mounted 当需要操作dom的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

updated 当数据更新需要做统一业务处理的时候使用