前言

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以及指令、过滤器等都已经不可用，销毁过程执行完毕

总结

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

VUE生命周期，经典面试题相关推荐

“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
“约见”面试官系列之常见面试题之第八十八篇之什么是vue生命周期（建议收藏）
我们知道vue是一个构建数据驱动的 web 界面的渐进式框架,那么vue生命周期是什么呢?本篇文章就给大家来介绍一下vue生命周期的内容,希望可以帮助到有需要的朋友. vue生命周期是什么? Vue生 ...
“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）
详解Vue Lifecycle 先来看看VUE官网对VUE生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
[vue] vue生命周期总共有几个阶段？
[vue] vue生命周期总共有几个阶段? beforeCreate:在 new 一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建.created:data 和 met ...
[vue] vue生命周期的作用是什么？
[vue] vue生命周期的作用是什么? 准确地控制数据流和其对DOM的影响个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
Vue生命周期及组件
目录 Vue 生命周期钩子钩子函数的由来生命周期钩子函数生命周期图示钩子函数测试添加组件展示: 组件数据更新: 没建任务, 没有任务销毁, 看不到实际的效果. 创建定时任务销毁定时任务 Vu ...
vue生命周期钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行使用钩子函数可以知道vue生命周期到达了什么阶段作用:在特定的时间点执行特定的操作 ...

VUE生命周期，经典面试题

文章目录

前言