vue 生命周期 应用场景 概述

鉴于总结别人的面试经验，当提到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 实例销毁后调用。调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue生命周期的应用场景：

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

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

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

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