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

相关推荐
草字16 小时前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
一位搞嵌入式的 genius16 小时前
Vue实例挂载:从原理到项目实践的全维度解析
前端·javascript·vue.js·前端框架
cindershade16 小时前
Vue 3 Keep-Alive 深度实践:从原理到最佳实践
vue.js·vue-router
waeng_luo16 小时前
[鸿蒙2025领航者闯关] 表单验证与用户输入处理最佳实践
开发语言·前端·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
0思必得016 小时前
[Web自动化] 开发者工具应用(Application)面板
运维·前端·python·自动化·web自动化·开发者工具
m0_7400437316 小时前
Vue Router中获取路由参数d两种方式:$route.query和$route.params
前端·javascript·vue.js
风止何安啊16 小时前
Event Loop 教你高效 “划水”:JS 单线程的“摸鱼”指南
前端·javascript·面试
@菜菜_达16 小时前
goldenLayout布局
前端·javascript
Shirley~~16 小时前
vite的tersor在lib库模式下不生效问题
javascript·vue.js·ecmascript
小飞侠在吗16 小时前
vue 生命周期
前端·javascript·vue.js