vue面试题|[2025-1-3]

1.v-if和v-show的区别?

都是可以控制元素的显示和隐藏

1.v-show是控制元素的display值来让元素显示和隐藏;v-if显示(隐藏)时会把整个DOM元素添加(删除)

2.v-show只是简单的css切换;v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件

3.v-show的切换效率比较高;v-if的效率比较低;

2.如何理解MVVM?

是Model-View-ViewModel的缩写。前端开发的架构模式。

M:模型,对应的就是data的数据

V:视图,用户界面,DOM

VM:视图模型,Vue的实例对象,连接View和Model的桥梁

核心就是提供对View和Model的双向数据绑定。当数据变化的时候,ViewModel能监听到数据的变化,自动更新视图;当用户操作视图的时候,ViewModel也可以监听到视图的变化,然后通知数据进行改动,这就实现了双向绑定。

ViewModel通过双向绑定把ViewModel连接起来,他们之间的同步是自动的,不需要人为干涉,所以我们只需要关注业务逻辑即可,不需要操作DOM,同时也不需要关注数据的状态问题,因为她是由MVVM统一管理。

3.v-for中的key值的作用是什么?

key属性是DOM元素的唯一标识

作用:

1.提高虚拟DOM的更新

2.若不设置key,可能会触发一些bug

3.为了触发过渡效果

4.说一下你对vue生命周期的理解

组件从创建到销毁的过程就是它的生命周期。

创建

beforeCreate:在这个阶段属性和方法都不能使用

created:这里是实例创建完成之后,完成了数据监测,可以使用数据,修改数据,不会触发updated,也不会更新视图

挂载

beforeMount:完成了模板的编译,虚拟DOM也完成创建,即将渲染,修改数据,不会触发updated

mounted:把编译好的模板挂载到页面,这里可以发送异步请求也可以访问DOM节点

更新

beforeUpdate:组件数据更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以改数据

updated:render重新做了渲染,这时数据和页面都是新的,避免在此更新数据

销毁

beforeDestroy:实例销毁前,在这里实例还可以用,可以清除定时器等等

destroyed:组件已经销毁了,全部都销毁

使用了keep-alive时会多出两个周期:

activated:组件激活时

deactivited:组件被销毁时

5.在created和mounted去请求数据,有什么区别?

created:在渲染前调用,通常先初始化属性,然后做渲染

mounted:在模板渲染完成后,一般都是初始化页面后,再对元素节点进行操作

在这里请求数据可能会出现闪屏的问题,created里不会

一般用created请求数据比较多

请求数据对DOM有影响,那么使用created

如果请求的数据对DOM无关,可以放在mounted

相关推荐
长安即是故里几秒前
搭建一个现代化视频聚合播放平台(含视频源)
前端·音视频·开源项目··部署教程
2501_944441752 分钟前
Flutter&OpenHarmony商城App用户中心组件开发
java·javascript·flutter
花归去4 分钟前
Promise 包含的属性
开发语言·javascript·ecmascript
2501_944446005 分钟前
Flutter&OpenHarmony主题切换功能实现
开发语言·javascript·flutter
挖矿大亨7 分钟前
c++中的函数调用运算符重载
前端·c++·算法
木辰風9 分钟前
EasyExcel根据动态字段,进行导出excel文件
java·前端·excel
C_心欲无痕12 分钟前
react - useReducer复杂状态管理
前端·javascript·react.js
AI前端老薛16 分钟前
面试:React虚拟DOM是什么?解决了哪些问题?
前端·react.js
松涛和鸣18 分钟前
42、SQLite3 :字典入库与数据查询
linux·前端·网络·数据库·udp·sqlite
IT_陈寒23 分钟前
SpringBoot 3.2实战:我用这5个冷门特性将接口QPS提升了200%
前端·人工智能·后端