VUE生命周期，经典面试题

---

前言

VUE有哪些特性，我们为什么要使用它
1.易用
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
2.灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3.高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
（来自VUE官网）

---

VUE近几年在前端是非常火的一个框架，很多公司面试时VUE面试题也非常容易被提到，那今天我们了解一下VUE面试中的经典面试题：对于VUE的生命周期，你是怎么理解的？

一、VUE生命周期是什么？

生命周期字面意思，是一个生命从出生到死亡的一个周期，那VUE生命周期自然是一个VUE实例从创建到销毁的一个过程，在这个过程中有不同的阶段。将其比作蝴蝶，就是从毛毛虫——结茧——破茧——羽化成蝶，蝴蝶的生命周期。

VUE周期示意图

上图为VUE官网提供

二、VUE生命周期不同的阶段

当面试官提到你对VUE生命周期的理解时，我们不可避免的要谈一下它有哪些阶段。在这些阶段中，有哪些操作可以执行，哪些操作不可执行。我们先来看一下VUE生命周期分为哪几个阶段

1.创建前/后 beforeCreate/Created
2.载入前/后 beforeMount/Mounted
3.更新前/后 beforeUpdate/Updated
4.销毁前/后 beforeDestroy/Destroyed

下面我们看一下不同阶段都能做到哪些操作

1.创建前/后

beforeCreate（创建前）
当执行了beforeCreate函数时，表示我们刚初始化了一个空的VUE实例对象，这时它只有默认的一些生命周期和默认的事件，其他东西都尚未创建。

Created（创建后）
在执行了beforeCreate之后就会执行Created函数，进入到创建后阶段，在创建后的阶段中，data和methods都已经被初始化好了。
想要操作data中的数据或者调用methods中的方法最早只能在Created中操作

2.载入前/后

beforeMount（载入前）
当执行了Create之后就进入到了VUE生命周期的beforeMount阶段，载入前会执行beforeMount，在此函数执行时，模板已经在内存中编译完成，但尚未挂载至页面，此时页面还是旧的。

Mounted（载入后）

（图中beforeUpdate是下面的更新周期，可以先不用管）
beforeMount函数执行完毕会执行Mounted函数，当执行了Mounted函数之后就表示我们的整个VUE实例已经初始化完毕，这一阶段一个VUE实例已经完全成熟，是我们实现方法、过滤器等操作的最佳阶段。此时组件已经脱离创建阶段，进入运行阶段

3.更新前/后

beforeUpdate（更新前）
执行完mounted函数就进入了beforeUpdate阶段，这一阶段产生在mounted中，与页面形成了一个循环的交互，但页面中显示的数据还是旧的，此时data数据是最新的，不过页面与最新的数据尚未同步。

Updated（更新后）
当执行Updated函数时，页面与data数据已经保持同步，页面显示内容都是最新的了

4.销毁前/后

beforeDestroy（销毁前）
当执行beforDestroy函数时，VUE实例已经从运行阶段进入销毁阶段，实例中的data、methods以及指令、过滤器等都还处于可用状态，还未真正执行销毁过程

Destroyed（销毁前）
当执行到Destroyed函数时，组件已经被完全销毁，此时组件中所有的data、methods以及指令、过滤器等都已经不可用，销毁过程执行完毕

---

总结

以上是我们本次分享的所有内容希望能帮到各位，如有纠正，感谢评论指出