Vue生命周期相关【前端面试宝典】

最新推荐文章于 2023-09-18 10:06:26 发布

锕祺

最新推荐文章于 2023-09-18 10:06:26 发布

阅读量336

点赞数

文章标签：面试前端 vue.js

本文链接：https://blog.csdn.net/weixin_70947213/article/details/124766881

版权

写在前面

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

1、什么是vue生命周期？vue生命周期的作用是什么？

概念：Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

作用：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

2、vue的生命周期的八个钩子函数？

1、beforeCreat() ：创建前在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
2、 created（）：被创建 data 和 methods都已经被初始化好了，可以调用了
3、beforeMount() ：挂载前在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
4、mounted（）：已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
5、beforeupdate（）：更新前页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
6、updated（）：更新页面显示的数据和data中的数据已经保持同步了，都是最新的
7、beforeDestroy()：销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁
8、destroyed（）：被销毁这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

3、第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。

4、简述每个周期具体适合哪些场景？

1、beforecreate : 可以在这加个loading事件，在加载实例时触发
2、created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
3、mounted : 挂载元素，获取到DOM节点
4、updated : 如果对数据统一处理，在这里写上相应函数
5、beforeDestroy : 可以做一个确认停止事件的确认框
6、nextTick : 更新数据后立即操作dom