vue面试题

v-if和v-show的区别

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

1.V-show时控制元素的display值来让元素显示和隐藏:v-if显示隐藏时把DoM元素整个添加和删除

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

CSs切换

3.v-if才是真正的条件渲染;V-show从false变成true的时候不会触发组件的声明周期,v-if会触发声明周期

4.V-if的切换效率比较低

V-show的效率比较高

如何理解MVVM

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

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

V:视图,用户界面,DOM

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

核心是提供对View和viewModel的双向数据绑定,当数据改变的时候,ViewModel能监听到数据的变化,自动更新视图,

当用户操作视图的时候,ViewModel也可以监听到视图的变化,然后通知数据进行改动,这就实现了双向数据绑定

ViewModel通过双向绑定把view和Model连接起来,他们之间的同步是自动的,不需要认为干涉,所以我们只需要关注业

务逻辑即可,不需要操作DOM,同时也不需要关注数据的状态问题,因为她是由MVVM统一管理

v-if中的key值的作用是什么

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

作用:

1.提高虚拟DOM的更新

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

3.为了触发过度效果

说一下你对VUE生命周期的理解

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

创建

beforeCreat

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

挂载

created

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

视图

beforeMount

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

Mounted

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

更新

beforeUpdate

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

updated

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

销毁

beforeDestroy

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

destroyed

组件已经被销毁了,全部都销毁

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

activited

组件激活时

deactivited

组件被销毁时

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

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

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

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

一般用created比较多

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

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

vue中的修饰符有哪些

1.事件修饰符

.stop 组织冒泡

.prevent 组织默认行为

.capture 内部元素触发的事件先在次处理

.self 只有在event.target是当前元素时触发

.once 事件只会触发一次

.passive 立即触发默认行为

.native 把当前元素作为原生标签看待

2.按键修饰符

.keyup 键盘抬起

.keydown 键盘按下

3.系统修饰符

.ctrl

.alt

.meta

4.鼠标修饰符

.left 鼠标左键

.right 鼠标右键

.middle 鼠标中键

5.表单修饰符

.lazy 等输入完之后再显示

.trim 删除内容前后的空格

.number 输入是数字或转为数字

elementui是如何做表单校验的

1.在表单中加rules属性,然后再data里写校验规则

2.内部添加规则 (data中)

3.自定义函数校验 (methods中)

vue 如何进行组件通信

1.父传子

props

父组件使用自定义属性,然后子组件使用props
r e f 引用信息会注册在父组件的 ref 引用信息会注册在父组件的 ref引用信息会注册在父组件的refs对象上

2.子传父

$emit

子组件绑定自定义事件,触发执行后,传给父组件,父组件需要用事件监听来接收参数

3.兄弟传

new一个新的vue实例,用on和emit来对数据进行传输

4.vuex传值

keep-alive 是什么,如何使用

Vue的一个内置组件,包裹组件的时候,会缓存不活跃的组件实例,并不是销毁他们

作用:把组件切换的状态保存在内存里,防止重复渲染DOM节点,减少加载时间和性能消耗,提高用户体验

axios是怎么做封装的

下载创建实例接着封装请求响应拦截器 抛出最后封装接口

vue路由时是怎么传参的

params传参

this. r o u t e r . p u s h ( n a m e : ′ i n d e x ′ , p a r a m s : i d : i t e m . i d ) t h i s . router.push({name:'index',params:{id:item.id}}) this. router.push(name:′index′,params:id:item.id)this.route.params.id

路由属性传参

this.KaTeX parse error: Expected '}', got 'EOF' at end of input: ...({name:'/index/{item.id}'})

路由配置{path:/index:id'}

query传参(可以解决页面刷新参数丢失的问题)

this.$router.push({

name:'index',

query:{id:item.id}

})

vue 路由的hash模式和history模式有什么区别

1.hash的路由地址上有#号,history模式没有

2.在做回车刷新的时候,hash模式会加载对应页面,history会报错404

3.hash模式支持低版本浏览器,history不支持,因为是H5新增的API

4.hash不会重新加载页面,单页面应用必备

5.history有历史记录,H5新增了pushState和replaceState()去修改历史记录,并不会立刻发送请求

6.history需要后台配置

路由拦截是怎么实现的

路由拦截axios拦截

需要在路由配置中添加一个字段,它是用于判断路由是否需要拦截

name:'index',

path:'/index',

component:Index,

meta:{

requirtAuth:true

router.beforeEach((to,from,next)=>{

if(to.meta.requirtAuth){

if(store.satte.token){

next()

说一下vue的动态路由

要在路由配置里设置meat属性,扩展权限相关的字段,在路由导航守卫里通过判断这个权限标识,实现路由的动态增加和

跳转

根据用户登录的账号,返回用户角色

前端再根据角色,跟路由表的meta.role进行匹配

把匹配搭配的路由形成可访问的路由

相关推荐
风中飘爻12 分钟前
JavaScript:BOM编程
开发语言·javascript·ecmascript
恋猫de小郭14 分钟前
Android Studio Cloud 正式上线,不只是 Android,随时随地改 bug
android·前端·flutter
清岚_lxn5 小时前
原生SSE实现AI智能问答+Vue3前端打字机流效果
前端·javascript·人工智能·vue·ai问答
ZoeLandia5 小时前
Element UI 设置 el-table-column 宽度 width 为百分比无效
前端·ui·element-ui
橘子味的冰淇淋~6 小时前
解决 vite.config.ts 引入scss 预处理报错
前端·vue·scss
萌萌哒草头将军7 小时前
💎这么做,cursor 生成的代码更懂你!💎
javascript·visual studio code·cursor
小小小小宇7 小时前
V8 引擎垃圾回收机制详解
前端
lauo8 小时前
智体知识库:ai-docs对分布式智体编程语言Poplang和javascript的语法的比较(知识库问答)
开发语言·前端·javascript·分布式·机器人·开源
拉不动的猪8 小时前
设计模式之------单例模式
前端·javascript·面试
一袋米扛几楼988 小时前
【React框架】什么是 Vite?如何使用vite自动生成react的目录?
前端·react.js·前端框架