前言
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以及指令、过滤器等都已经不可用,销毁过程执行完毕
总结
以上是我们本次分享的所有内容希望能帮到各位,如有纠正,感谢评论指出