2023vue面试题
1.谈谈你对vue的了解
vue的作者是尤雨溪,2013年受angular启发,开发出比angular更轻的seed框架,2014正式对外发布。
-vue是一套用于构建用户界面的渐进式javascript框架。
-渐进式可以理解为自底层向上逐层的应用,(从简单的应用递进到复杂应用)-简单应用:只需要一个轻量级小巧的核心库-复杂应用:可以引入各式各样的vue插件
-vue特点-采用组件化模式,提高代码复用率、让代码更简洁。-声明式编码,无需直接操作dom,提高开发效率。
2.数据双向绑定(数据代理)
-通过vm对象来代理data对象中的属性操作(读/写)
-更加方便的操作数据
-原理:通过object.defineProperty()把data对象中的所有属性添加到vm实例上,然后为每一个添加到vm实例上的属性,都指定一个getter和setter,在getter/getter内部去操作(读/写)data中对应的属性。
3.对mvvm的理解
是model-view-viewmodel的缩写,是一种结构模式(设计思想)
model是数据模型,用于对数据的定义和修改等操作。
view是ui视图层,用于渲染页面。
viewModel:负责监听model中数据的改变并控制属兔更新,处理用户交互操作。
修改View层,Model对应数据发生变化
Model数据变化,不需要查找DOM,直接更新View
4.修饰符
事件修饰符(可以连续使用)
-.prevent阻止默认行为
-.stop阻止冒泡
-.once事件触发一次
-.capture使用事件的捕获模式
-.self只有event.target是当前操作的元素才会触发事件
-.passive事件默认行为立即执行,无需等待事件回调执行完毕。
键盘修饰符keydown keyup
-enter回车
-delete删除/退格
-esc退出
-space空格
-tab换行
-up上
-down下
-left左
-right右
-vue未提供别名的按键,可以使用按键原始的key值去绑定,注意要转为kebab-case(短横线命名caps-lock)
-系统修饰键:ctrl、alt、shift、meta-配合keyup使用:按下修饰键的同时再按下其他键,随后释放其他键,事件才会被触发-配合keydown使用:正常触发事件。
-使用keyCode去指定具体按键
-Vue.config.keyCodes.自定义键名=键码,可以定制按键别名
5.计算属性与监听属性
计算属性:
-get、set属性,底层借助了object.defineproperty方法提供的getter和setter。
-当读取计算属性里的值时,get会被调用,初次读取值或者所依赖的数据发生改变时都会被调用。
-有缓存,只有所依赖的数据发生改变时缓存的值才会更新。
-当计算属性的值被直接修改时会执行set
监听属性
-当监视属性变化时,回调函数自动调用,进行相关操作。
-监听属性有两种写法:new Vue里传入watch配置或者通过vm.$watch()监听。
-有handler函数,其身上有旧值与新值(newValue,oldValue)
-没有缓存
-检测data里的属性,也可以监听计算属性里的值
-默认不检测对象内部值的改变,可配置deep:true开启深度监听
区别
-componted无法开启异步任务,watch可以开启异步任务
-componted有缓存机制,watch没有缓存机制
-componted可以完成的功能watch都可以完成,而watch完成的功能componted不一定能完成
-componted的计算结果受其依赖属性的影响,watch的改变可以影响依赖属性。
6.v-if和v-show的区别
-v-show是通过dispaly的属性值来控制元素的显示与隐藏,隐藏后dom元素节点还存在。
-v-if则是通过元素节点的创建与销毁来实现元素的显示与隐藏,隐藏后dom元素节点不存在。
-v-show适用于切换频率比较频繁的场景。
-v-if适用于切换频率比较低的场景。
7.v-for中key的作用
-虚拟dom中,key是唯一标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后新的虚拟dom与旧的虚拟dom进行差异比较(diff算法)。
-新虚拟dom与旧虚拟dom是通过key进行比较的,如果虚拟dom内容没有发生改变,直接复用之前的真实dom,如果虚拟dom中的内容发生了变化,则生成新的真实dom,随后替换掉页面中对应的旧的真实dom。
-用index索引作为key的话,如果对数据进行逆序添加、逆序删除等破坏顺序的操作,会产生没有必要的真实dom更新,降低效率,如果还有输入类的dom时,会导致界面渲染错误。
-最好将每条数据的唯一标识作为key,如果不存在逆序操作,仅用于列表渲染,可以使用index作为key。
8.vue是如何检测数据的原理(响应式)
<script>let data={name:'xxx',address:'xxx'}//创建一个监视的实例对象const obs=new Observer(data);//vm实例对象let vm={};vm._data=data=obs;function Observer(obj){//汇总对象中的所有属性形成一个数组const keys=Object.keys(obj);keys.forEach((k)=>{//this指的是ObserverObject.defineProperty(this,k,{get(){return obj[k];},set(val){obj[k]=val;}})})}
</script>
-vue会监视data中所有层次的数据
-通过setter实现监视,且在new Vue时就传入需要检测的数据。
-对象中后添加的属性,vue不做响应式处理,可以使用Vue.set(target,index,value)或者this.$set()
-对于数组中的数据,默认不监听,可以通过vue提供的push、pop、shift、unshift、splice、sort、reverse对数组的方法进行包装后实现响应式。
9.生命周期
beforeCreate:实例创建之前,初始化事件和数据,无法访问data中的数据和methods中的方法。数据代理未开始
created:实例创建完成,数据和事件已初始化完成,可以访问到data中的数据和methods里的方法。数据监测、数据代理
beforeMounte:实例挂在之前,虚拟dom以准备好,还没有生成真实dom,页面还没有被渲染,对所有的dom操作最终都不生效。
mounted:实例挂载之后,生成了经过vue编译的真实dom,页面被渲染,对dom的操作均有效,初始化过程结束,一般在此开启定时器、发送网络请求、订阅消息、绑定自定义事件等操作。
beforeUpdate:页面更新之前,此时数据是最新的,页面还是旧的,页面和数据尚未保持同步。
updated:页面更新之后,数据时新的,页面也是新的,数据和页面保持同步,完成了model-view的更新。
beforeDestory:实例销毁之前,data里的数据和methods的方法、指令等都可以使用,但操作数据不会触发更新流程,一般在此关闭定时器、解绑自定义事件、取消订阅等操作。
destory:实例销毁之后,自定义事件会失效,但原生的dom事件依然有效。
使用keep-alive缓存后会有路由组件独有的生命周期钩子
actived:被缓存的组件被激活(显示)时使用
deactivated:被缓存的组件失活(隐藏)时使用
特殊的生命周期钩子
$nextTick():在页面下次更新渲染时执行
10.vue中,组件化中data为什么是函数
-避免组件被复用时,数据存在引用关系。
-vue组件可能存在多个实例,如果使用对象形式,会导致多个组件共用一个data,从而使一个组件影响其他组件。
-如果用函数定义,会返回一个全新的对象,避免了组件间之间data的相互影响。
11.组件的创建过程
-组件的本质是一个VueComponent的构造函数,是Vue.extend生成的。每次调用Vue.extend返回的都是一个新的VueComponent。
-非单文件组件-使用Vue.extend({})创建组件-在vue实例对象中注册组件components:{},(全局组件Vue.component()和局部组件)-使用组件
-单文件组件-创建组件文件.vue-使用import引入组件-在components里注册组件-使用标签形式使用组件
12.vue脚手架中目录分别是什么意思
-.gitignore git的忽略文件
-babel.config.js babel的配置文件(babel是控制es6转es5)
-package-lock.json 包说明书的缓存文件,用于锁定版本
-package.json 包的说明书
-README.md笔记
-src-mian.js 整个项目的入口文件-assets一般存放静态资源,png、视频等-App.vue跟组件-components存放除app.vue外的其他组件
-public-ico图标-index.html
-node_modules存放第三包的文件夹
render(createElement){return createElement('h1','xxxx')
}
13.浏览器的本地存储
-localStorage 浏览器窗口关闭内容不会消失,存储大小一般为5mb,setItem、getItem、remove、clear等api,持久化存储,需要手动清除才会消失,getItem获取不到对应的value会返回null。
-sessionStorage 浏览器窗口关闭,存储的数据会清空,setItem、getItem、remove、clear。
-cookie是一种浏览器管理状态的一个文件,它有name、value,Domain、path等等,数据大小不能超过 4K,是服务器向浏览器发送的一小块数据,不可以跨域请求。设置的cookies过期时间之前一直有效,即使窗口和浏览器关闭,数据会自动地传递到服务器,服务器也可以写cookies到客户端
14.vue组件之间传值
-父组件传值子组件props f:<demo :str="str"></demo>
-子组件传父组件自定义事件的$emitf:<demo @str="str"></demo>methods:{demo(e){}}c:methods:{handler(){this.$emit('str',this.obj)}}通过refs中的$onf:<demo ref="str"></demo>mounted:{this.$refs.str.$on('handler',回调函数)}
-兄弟组件传值vuex全局事件总线$busmain.jsnew Vue({render:h=>h(App),beforeCreated(){//安装全局事件总线Vue.prototyp.$bus=this}}).$mount()在组件中通过this.$bus.$emit('xxx',data)提供数据,通过this.$bus.on('xxx',(data)=>{})获取数据。消息订阅与发布安装pubsub-js引入pubsub-js订阅消息用pubsub.subscribe('xxx',data)发布消息pubsub.publish('xxx',(msgNmae,data)=>{})
14.nextTick
this.$nextTick()
-作用:在下一次dom更新结束之后执行指定回调
-什么时候调用:当改变数据后,要基于更新后的新dom进行某些操作时
15.vue解决跨域
只有浏览器才存在跨域
-cors后端配置响应头,真正意义上的解决跨域
-jsonp立勇<script>的src属性,需要前后端配合,并且只能解决get请求的跨域。
-配置代理服务器1.nginx2.利用vue-cli-devServer:{proxy:'目标服务器地址'},请求是axios.get('代理服务器地址/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath()-devServer:{proxy:{'/api':{target:'目标服务器地址',pathRewrite:{'^/api':''}}}}axios.get('代理服务器地址/api/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath()
16.插槽
插槽是让父组件向子组件指定位置插入html结构,也是一种组件通信的方式。
-默认插槽/不具名插槽c:<solt><solt> f:<child>xxxxxx</child>子组件中只能定义一个插槽模块
-具名插槽c:<solt name="demo"></solt> f:<child><div solt="demo">xxx</div></child>在使用<template></template>标签时可写成f:<child><template v-solt:demo>xxx</template></child>
-作用域插槽c:<solt :a='b'></solt>f:<template scope='c'></template>或<template slot-scope='c'></template>作用域插槽是数据在插槽子组件时,无法在插槽使用者父组件中获取得到数据,可以用scope来传递数据,接收时必须用template标签包裹结构。
17.vuex
-vuex是专门在vue中实现集中式状态(数据)管理的vue插件,对vue中多个组件共享状态进行集中式的管理(读/写)。适用于任意组件通信。
-state存储vue中需要共享的状态(数据),只能在mutations中修改,被修改后会自动更新使用的组件页面。
-actions提交异步请求,组件通过this.$store.dispatch('行为','值'),可在这里发送请求,之后可以通过commit('行为','值')来提交给mutations,如果不需要向服务器发送请求,可以在组件中通过this.$store.commit('行为','值')来直接提交到mutations里。xxx(conText,value){conText.commit('XXX',value)}
-mutations同步操作,可以在此修改state里的值,行为(state,'值'){}XXX(state,value){}
-gettersstate的计算属性,可以在此对state的数据进行加工xxx(state){return xxxx}
-modulenew Vuex.Store({modules:{a:xxx,b:xxx}})computed:{...mapState('a',['xxx'])}需要在每个模块里写namespaced:true
-import {mapState} from 'vuex'computed:{...mapState({a:'xxx',b:'xx'})或...mapState(['xxx','xx'])}
18.路由
路由切换时,不显示的路由组件被销毁
19.路由传参
-使用router-link时query传参:<router-link :to="/xxx/xxx?id=xx&name=xxx"></router-link><router-link :to="{path:'/xxx/xx',query:{id:xxx,name:xxx}}">跳转</router-link>使用this.$route.query.id获取params传参<router-link :to="/xxx/xxx/001/sddf"></router-link><router-link :to="{name:'asd',params:{id:xxx,name:xxx}}"></router-link>-router.js{name:'asd',path:'xxxx/:id/:name',component:Detail}接收参数this.$route.params.id
-使用params传参时,若是对象写法,需要在router.js中配置响应的name属性,并且需要占位。
-使用编程式路由导航this.$router.push({name:'xxx',params:{id:xxx,title:xxx}})
20.keep-alive
-使路由组件在切换时不被销毁
-包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
21.路由守卫
对路由进行权限控制
router.beforeEach:全局前置路由守卫,to:目标路由,from:来源路由,next():放行;自定义参数需要配置在路由元信息(meta)里配置,用来控制权限。
router.afterEach():全局后置路由守卫,可用于动态更改页面标题。
beforeEnter():单个路由配置,路由独享守卫,对某一个路由进行权限设置。
beforeRouteEnter():组件内置守卫,通过路由规则,进入组件之前调用。
beforeRouteLeave():组件内置守卫,通过路由规则,离开组件之前调用。
22.路由的hash和history
hash:路径中带#,其#后面的参数不会做为路径的一部分发给服务器;若地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法,兼容性比较好。
history:路径中带/,后面的参数不会做为路径的一部分发给服务器;兼容性略差,需要后端去解决页面刷新出现404的问题。
23.vue3的优点
-性能提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%
-源码升级使用proxy代替defineproperty实现响应式重写虚拟dom的实现和剔除多余代码(tree-shaking)
-vue3可以更好的支持typescript
-新特性composition API(组合api)setup配置ref与reactive新的内置组件fragmentteleport新的生命周期钩子移除keycode支持作为v-on的修饰符data始终是一个函数
24.watchEffect函数和computed的区别
-computed:是计算函数,注重计算出来的值,所以必须写返回值
-watchEffect:是监视函数,注重过程,不用写返回值
2023vue面试题相关推荐
- mysql关于时间的面试题,mysql时间设置默认值MySQL常见面试题
1.limit(选出10 到20 条) select * from students order by id limit 9,10; 2.MySQL 会使用索引的操作符号 =,>,=,betwe ...
- C++ 笔记(33)— C/C++ 程序员常见面试试题深入剖析
1. 找错题 试题1: void test1() {char string[10];char* str1 = "0123456789";strcpy(string, str1); ...
- 前端面试题笔记 2021.8.26
2021.8.26学习笔记 如果需要匹配包含文本的元素,用下面哪种方法来实现? A. text() B. contains() C. input() D. attr(name) 正确答案: B tex ...
- andorid 启动模式面试题
现在有四个activity a,b,c,d ,设置a为标准模式,b为singletop模式 c设置singletask模式,d设置SingleInstance 模式 a启动b ,b 启动 c ,c启动 ...
- java 关键字(面试题)
学而时习之,温故而知新. 今天群里有人问java中true ,false 是关键字吗, 这里记录下,不是关键字,我还特意翻看之前的书看看 下面是 Java 语言保留使用的 50 个关键字: 关键字 g ...
- Kotlin的几个面试题
今天去自己心仪的公司去面试,本来信心满满,结果面试下面自己深感能力不足,哎,错失了一次这么好的机会 不过还是感谢能给自己这次面试的机会 1 说一下Kotlin的伴生对象(关键字companion使用要 ...
- 浙江大学数学专业考研试题参考解答
浙江大学2009年数学分析考研试题参考解答 浙江大学2010年数学分析考研试题参考解答 浙江大学2011年数学分析考研试题参考解答 浙江大学2012年数学分析考研试题参考解答 浙江大学2013年数学分 ...
- Java程序猿面试题集(181- 199)
Java面试题集(181-199) 摘要:这部分是包括了Java高级玩法的一些专题,对面试者和新入职的Java程序猿相信都会有帮助的. 181. 182. 183. 184. 185. 186. 1 ...
- Erlang服务端开发(无需Erlang基础)笔试题
某游戏公司Erlang服务端开发(无需Erlang基础)笔试题,面向C/C++程序员 一.用你熟悉的语言解决下面的问题. 1.反转输出字符串,并移除其中的空格. 2.快速的判断一个数是否素数的方法. ...
最新文章
- 线程撕裂者安装linux,Linux FreeBSD 12.1跑分测试:在AMD Ryzen线程撕裂者3970X上快得刷新认知...
- python内建集合模块collections功能,计数,有序,双向队列
- P8实战(四):多种分布式锁实现
- Jquery中的$(document).ready()详解
- 在河北当中学老师用不用考计算机,河北省教育厅出台新方案 师范生当教师也需考证...
- api报错 javaee maven_maven test 换javaee6 无法加载spring的配置文件 ?报错-问答-阿里云开发者社区-阿里云...
- noip2014生活大爆炸版石头剪刀布
- jquery+ajax验证不通过也提交表单问题处理
- leetcode 423 从英文中重建数字
- 腾讯AI加速器三期全球招募开启,打造AI+产业生力军
- SQL 基础笔试题 (三)
- pythonpath怎么设置_Python编程该怎么入门 模块引用的方法有哪些
- 防止mdf文件被非法附加后修改的一个简单实现方案
- OpenWrt常用命令总结
- Windows bat命令解压缩文件360zip
- 解决SVN安装语言包后无法选择中文的问题
- What is china
- HDU 6438 Buy and Resell (优先队列 or 贪心)
- 台式计算机显示不了无线网络,台式电脑无线网卡不显示wifi,电脑怎样连接wifi
- 查询IP信息接口罗列
热门文章
- 【译】潜在语义分析Latent Semantic Analysis (LSA)
- 泰勒公式理解 数学基础
- 计算机多媒体要学3dmax吗,发表下个人做3Dmax所需要电脑配置分析
- 增长量计算n+1原则_数资备考技巧——资料分析题型之增长量计算
- 灵魂书籍 | 莉尔·朗兹 |《如何让你爱的人爱上你 | 莉尔·朗兹》
- 2.15 Go语言反射实例
- [讨论]我们需要什么样的学术会议?
- 什么是web components?
- PTA L1-060:心理阴影面积 (python)
- 2019年终总结,一位本命年程序猿的年终总结