2023前端面试题大全VUE

2023（Vue前端面试题大全篇）MWM简述框架上代表数据模型，也可以在中定义数据修改和操作的业务逻辑Mode Model代表组件，它负责将数据模型转化成展现出来View:UI UI监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步ViewModel:和的对象，连接和View ModelModel Viewvue2vue3和区别写法上的区别:使用的是（选项）的是（当然

1.vue2options Api,vue3composition ApiVUe3也兼容中等都是分散的而composition api）o optionsApi methods,compute,data apicomposition api中的代码是根据逻辑功能来组织的，我们可以将一个功能所定义的叩等methods,co ute,data会放在一起，让我们可以更灵活地组合组件逻辑api将响应式数据放到函数中，而则是使用和将数据声明

2.vue2data vue3ref reactive为响应式响应式实现方式:中是通过对数据劫持实现的,中则

3.vue2Object.defineProperty VUe3是使用对数据代理实现的Proxy生命周期区别:中将和合并到了函数中

4.VUe3beforeCreate createdsetup根节点:组件允许多个根节点，而只允许一个

5.vue3vue2内置组件:新增了传送组件和异步依赖处理组件

6.VUe3Teleport Suspensev-if v-show和表示一个元素是否被创建，而则是控制这个元素的

1.v-if domv-show domdisplay属性是否为none一般在频繁切换状态的地方使用则更适合条件不经常改变的场景，因为

2.v.show,v-if它切换开销相对较大v-for v-if和优先级开发过程中一般不建议同时将和放在一个标签中使用

1.v-for v-if中的优先级会更高，所以会先执行循环，再进行判断，所以这样

2.Vue2v-for v-if就会导致无论需不需展示这个元素，都会先遍历整个列表在中的优先级会更高，但是当我们遍历一个数组的时候，根据数组中的

3.Vue3v-if某个元素进行判断的时候就会报错，因为会先执行此时还没有拿到这个数组所以v-if v-if中会报错Vue3Vue介绍插槽用法中已经没有这个概念了，所以未来被问到的几率会越来越小，但是目前被问到vue3Mixin的频率还是很高的一般会它的概念以及优缺点，有时还会问它与父组件的生命周期执行顺序官网描述vue混入（mixin）提供了一种非常灵活的方式，来分发Vue组件中的可复用功能一个混入对象可以包含任意组件选项当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项回答的作用将组件的公共逻辑提取出来，哪个组件需要用到时，直接将提取的这部

1.Mixin分混入到组件内部即可的生命周期会在父组件生命周期之前执行，如果中的

2.Mixin Mixin属性或者方法与父组件冲突则会使用父组件中的.优点可以降低代码冗余提高逻辑复用2性缺点命名容易冲突，不好追溯源，后期排查不方便

3.dom对虚拟的理解简单来说就是一个描述结构的对象dom js每当我们用原生或者操作时，浏览器会从头开始进行树的构建，

1.JS JQDOM DOM频繁的操作开销是很大的DOM而虚拟就是为了减少这些操作的，虚拟首先会通过状态生成一个虚拟节

2.DOM DOM点树（对象），然后使用虚拟节点树进行渲染当某些状态发生变更时会生成新的虚拟js DOM节点树，然后与上一次虚拟节点树进行比较（）从而找到差异的部分，最后渲染DOM diff,到真实的节点上面DOMkeep-alive官网描述是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的KeepAlive组件实例回答通常我们切换组件的时候，上一个组件就会被销毁，而当我们使用将其

1.KeepAlive）包裹的话这个组件就会被缓存，当这个组件再一次被显示时就会保留之前的状态接收两个属性和分别代表哪些组件要用缓存和哪些不

2.keep-alive includeexclude,需要缓存，它接收组件的名字数组，字符串或者正则，当我们使用动态组件或者路component由的时候可以使用router-view还接收属性表示最大缓存实例数，如果超出这个数则最久没有被访问

3.keep-alive max的缓存实例将被销毁有两个生命周期，分别是和钩子会在首次

4.keep-alive activateddeactivated,activated挂载或者每次从缓存中被重新插入的时候调用钩子则是在组件从上移除或deactivated DOM者组件卸载时调用vue3新增的内置组件组件Teleport可以称之为传送门，作用将其插槽内容渲染到中的另一个位置，接收两个参数（要DOM to去的位置）和（是否留在原位置）接收比如下面代码disabled〈teleport=|〈video src=・/my-movie.mp4至将会被传送到为的元素下video idpopup组件Suspense组件用于协调对组件树中嵌套的异步依赖的处＜Suspense＞它理一般用于包裹多个异步组件处理多个异步组件加载前与完成后的统一状态

2.组件有两个插槽和在初始渲染时，将＜Suspense＞#default#fallback,＜Suspense＞在内存中渲染其默认的插槽内容如果在这个过程中遇到任何异步依赖，则会进入挂起状态等待异步组件加载完毕在挂起状态期间，展示的是奸插槽内容allbackSSR对的理解也就是服务端渲染，也就是将在客户端把标签渲染成的工作放在服务端SSR VueHTML完成，然后再把直接返回给客户端html的优势SSR更好的SEO首屏加载速度更快的缺点SSR开发条件会受到限制，服务器端渲染只支持和两个钩子;当需要一些beforeCreate created外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于的运行环境；更多Node.js的服务端负载vue响应式原理的响应式原理是根据这个来对数据进行劫持并结合发布者-订阅Vue Object.defineProperty api者模式实现的

2.

3.首先会利用中的函数来对中的的所有属性进行访问劫持，Object.defineProperty getVU6data中间会涉及到劫持中更深层次的属性需要递归调用劫持方法这里是通过一个data Observer类实现的

4.

5.劫持到每一个属性后会给这个属性绑定多个订阅者因为一个属性可能被用在很多地watcher,方;而这个中则包含更新视图的函数watcher updateo

7.「和属性的对应关系以及和视图的联系则是通过编译模板8叩类来实现的watche ilecompile中会拿到整个对象,然后遍历元素子节点获取到使用过中属性的则给该属性直dom vue data接添加一个并赋予一些更新当前视图的方法.watcher

8.

9.每个属性的多个订阅者都会被添加到对应的数组中，这里则是通过类实现的,watcher Deps初始化的时候会调用中的方法将对应添加该类的数组中watcher DepsaddSub watcherSubs

10.

11.当中的某个属性发生改变时则会触发中的函数,这时便会调用该data Object.defineProperty set属性的类中的函数遍历数组中的订阅者并调用其函数去触发视Deps notifySubs watcherupdate图的更新

12.Object.defineProperty proxy和区别只能代理属性，代理的是对象

1.Object.defineProperty Proxy对象上新增属性，可以监听到，不能

2.Proxy Object.defineProperty的代理行为是在破坏原对象的基础上实现的，则不会破

3.Object.defineProperty Proxy坏原对象，只是在原对象上覆盖了一层数组新增修改，可以监听到，不能

4.Proxy Object.defineProperty不兼容工及以下

5.Proxy Eli插槽可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉slot这个组件中的标签slot插槽分为默认插槽，具名插槽，作用域插槽默认插槽子组件中用标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入slot内容即可具名插槽顾名思义就是具有名字的插槽，子组件中可以用熟悉对命名，父组件在使用的时name slot候通过中的或者来定义这个插槽中的内容template v-slot:name#name〃子组件templateslot name=contentx/slot〈/template》具名插槽内容〈/|template v-slot:content template]作用域插槽子组件中的可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件slot的插槽内容中（子组件标签内），在父组件使用子组件的时候要用的值进行接收这些参v-slot数，默认插槽可以将其直接写在子组件标签上，具名插槽则写在上而传过来的值template只能在子组件标签中或者标签中使用所以在父组件作用域中获取到了子组件作用template域中的变量，可以认为作用域插槽延伸了子组件数据的作用范围，因此叫做作用域插槽过滤器的作用，如何实现一个过滤器过滤器是用来过滤数据的，在中使用来过滤数据，不会修改数据，而是过Vue filtersfilters滤数据，改变用户看到的输出使用场景需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出/显示比如后端返回一个年月日的日期字符串，前端需要展示为多少天前的数据格式,此时就可以用过滤器来处理数据fliters过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数过滤器用在插值表达式{{}}和表达式中，然后放在操作符〃|〃后面进行指示v-bind商品价格li{{item.price|filterPrice}}/lifilters:{filterPrice price{return price¥，+price:注意已经移除了过滤器vue3常见的事件修饰符及其作用等同于中的防止事件冒泡；.stop JavaScriptevent.stopPropagation,:等同于中的，防止执行预设的行为如果.prevent JavaScriptevent.preventDefault事件可取消，则取消该事件，而不停止事件的进一步传播；将事件改成捕获模式，由外到内触发.capture只会触发自己范围内的事件，不包含子元素；.self只会触发一次.oncev-model如何实现的其实是一个语法糖,比如v-modelinput,v-model=i|@input=message=$event.target.value”Vue2data中给中的对象属性添加一个新的属性时会发生什么？如何解决？中对象添加新属性绑定的视图不会更新，因为中劫持不到Vue2Vue2Object.defineProperty对象中新增的属性,可以使用解决data this.$setthis.obj,b,obj.b方法相当于手动的去把处理成一个响应式的属性，此时视图也会跟着改变$set obj.b了Vue插件用法面试一般会问你如何写一个插件，所以没写过插件的最好去亲自体验一下vue vue回答实例会有一个函数,它接受的是一个带有函数的对象和一个可选的选项对象当vue useinstall我们使用或者会调用我们插件的属性的函数，并且将当前组vue.useplugin app.useplugin install件的实例传进来,所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能Vue自定义指令官方提供了、、等常用的指令除此之外还允许开发者自vue v-text v-for v-model v-if vue定义指令面试经常会问什么是自定义指令你用自定义指令做过哪些功能？回答什么是自定义指令？1自定义指令包含局部指令和全局指令，在模板中使用指令前必须先使用选

1.directives项注册局部指令指在某个组件中注册，而全局则是将指令注册到全局,通常在中注main.js册自定义指令由一个包含类似组件生命周期钩子的对象来定义它的生命周期钩子包

2.含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,常用的钩子为和它接受等参数参数的值一般包

3.mounted updated,el,binding.binding含绑定到这个元素上的信息，比如下面这个指令kdiv v-example:foo.bar=baz|它的会是这个对象bindingarg:foo.modifiers:{bar:true},value:/*baz的值*/,/*上一次更新时的值*/oldValue:baz回答你用自定义指令做过哪些功能？2:数据埋点，通过绑定自定义事件传入点击当前元素需要埋点的事件名,在指令中监听

1.当前元素的点击事件后调用后台接口将事件名传入权限控制,通过绑定自定义事件传入控制当前元素的权限字段,在指令中获取到当前

2.元素根据权限字段来控制该元素的状态显示，隐藏等computed watch和是计算属性，依赖其它属性值，用于解决模板中放入过多的逻辑会让模板

1.computed过重且难以维护的问题是侦听器，当我们需要根据一个属性的变化而做出一些处理的时.watch候，可以使用来对这个属性进行监听watch具有缓存的特点,即当它所依赖的属性发生改变的时候它才会重新执行内部逻辑.

2.computed如下代码1/1em p1a〔import{computed,ref,watch}from vue;|return a.value+b页面多次使用则但是只会打印一次“内部逻辑执行“adds在页面首次加载的时候默认不会执行，需要设置首次才会执行监

1.watch immediate:true听默认只监听一层数据，不监听多层数据里属性的变化，需要设置才会

2.watch deep:true进行深度监听vue生命周期选项式描述Vue2API Vue3setup实例创建前beforeCreate—实例创建后created—挂载前调用beforeMount onBeforeMountDOM挂载完成调用mounted onMountedD0M数据更新之前被调用beforeUpdate onBeforeUpdate数据更新之后被调用updated onUpdated组件销毁前调用beforeDestroy onBeforeUnmount组件销毁完成调用destroyed onUnmountedvue父子组件生命周期执行顺序这个相对于上一个问题稍微复杂一点,可以试着理解记忆或者直接记住吧渲染过程graph TD父beforeCreate父created父beforeMount--r beforeCreater created--子beforeMount j]更新过程父beforeUpdate---T beforeUpdate・一子updated・・父updated]销毁过程|父beforeDestroy・・子beforeDestroy・・子destroyed・・父destroyed]注意如果子组件是异步组件的话它们的执行顺序会发生改变，会先执行完父组件的生命周期然后再执行子组件的生命周期vue导航路由守卫路由守卫分为全局路由守卫，路由独享守卫，组件路由守卫•全局路由守卫接收、、三个参数，每个路由跳转前都会触发，登录验证时用的

1.beforeEach,to fromnext比较多和类似，区别是在导航被确认之前，同时在所有组件内守

2.beforeResolve,beforeEach卫和异步路由组件被解析之后调用在路由跳转完成后调用，接收两个参数

3.afterEach,to from•路由独享守卫、一般配置在路由配置文件中对进入某个路由之前进行相关操作beforeEnte router/index.js,•组件路由守卫接收、三个参数to from,next

1.进入该组件之前调用，无法获取到实例beforeRouteEnter,VUe

2.在当前路由改变，但是该组件被复用时调用

3.beforeRouteUpdate,

4.

5.在后开当前组件时调用beforeRoute Leave,Vue-Router的懒加载如何实现使用箭头函数动态加载+importonst router=new VueRouterroutes:[{path:/list”,component:=imports@/components/list.vue}],hash history路由的和模式的区别有两种模式模式和模式默认的路由模式是模式Vue-Router hash history hash模式

1.hash简介模式是开发中默认的模式，它的带着一个#，例如hash URLwww.abc.eom/#/vue,它的值就是hash#/vue特点值会出现在里面，但是不会出现在请求中，对后端完全没有影响hash URLHTTP所以改变值，不会重新加载页面这种模式的浏览器支持度很好，低版本的浏览器hash IE也支持这种模式路由被称为是前端路由，已经成为单页面应用的标配hash SPA原理模式的主要原理就是事件hash onhashchangeconsole.logevent.oldURL,event.newURL;模式

1.history简介模式的中没有#,它使用的是传统的路由分发模式，即用户在输入一个history URLURL时，服务器会接收这个请求，并解析这个然后做出相应的逻辑处理特点当使用URL,history模式时，就像这样相比模式更加好看但是，模式需要URL abc.com/user/id□hashhistory后台配置支持如果后台没有正确配置，访问时会返回可以分为两404o APIhistory api大部分，切换历史状态和修改历史状态修改历史状态包括了中新增的和方法，HTML5History InterfacepushState replaceState这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能只是当他们进行修改时，虽然修改了但浏览器不会立即向后端发送请求如果要做到改变但又url,url不刷新页面的效果，就需要前端用上这两个APL切换历史状态包括、、三个方法，对应浏览器的前进，后退，跳转forward backgo操作虽然模式丢弃了丑陋的#但是，它也有自己的缺点，就是在刷新页面的时候，如果history没有相应的路由或资源，就会刷出来404如果想要切换到模式，需要后端进行一些配置如果匹配不到任何静态资源，history URL则应该返回同一个页面，这个页面就是你依赖的根页面index.html appApacheklfModulemod rewrite.oRewriteEngine OnRewriteBase/RewriteRule Aindex\.html$-[LRewriteCond%\[REQUEST FILENAMEKiRewriteCond%\[REQUEST FILENAME}!-dRewriteRule./index.html[L]nginxlocation/「t y_files$uri$uri//index.html;nexttick原理关于会问到它的用法，然后是它的原理，然后还可能问到的时间循环机制nextTick JS问题中的是干什么用的？l:vue nextTick这个其实比较简单,用过都知道它是干嘛的,官方的解释是vue在下次更新循环结束之后执行延迟回调在修改数据之后立即使用这个方法，获D0M取更新后的DOMo这是什么意思呢,其实中修改不会立刻触发更新;而是把需要更新的vuedatadom Watcher加入到队列中，然后在合适的时机在中调用这些的更新函queueWatcher nextTickWatcher数进行更新,所以在刚被修改的时候,我们是获取不到更新后的的，这时候dom datadom便需要调用函数在它的回调函数中获取到变化后的nextTick dom问题原理2:nextTick原理是借助浏览器事件循环来完成的，因为每次事件循环之间都有一次视图

1.nextTick渲染,尽量在视图渲染之前完成更新，所以优先使用的是（微nextTick domnextTick promise任务）实现每次执行时会将传入的回调函数放入一个队列中（数组），然后

2.nextTick callbacks当在本次事件循环的同步代码执行完毕后开启一个微任务（或者去promise MutationObserverj依次执行这个中的回调函数callbacks但是当浏览器不支持的时候在中会进行进行降级处理，依次使用

3.promise vue2开启一个宏任务执行setlmmediate setTimeoutcallbacks当一个数据更新时对应的便会调用一次将它对应的

4.data watchernextTick,dom更新操作作为回调函数放入中，所以当我们想获取这个更新后的需要在callbacks datadom其值变化后也调用将回调函数传入排在上个更新的回调函数后面,所以我们可nextTick dom以在这个的回调函数中获取到更新后的nextTick dataVue组件传参这里我大概归纳了一下和的传参方式vue2vue3方式Vue2Vue3方式Vue2Vue3父传子props props子传父$emit emits父传子$attrs attrs子传父无（合并到方式）Slisteners attrs父传子provide/inject provide/inject子组件访问父组件无$parent父组件访问子组件无$children父组件访问子组件$ref exposeref兄弟组件传值EventBus mittVuex是中的全局状态管理框架，它可以管理应用的所有组件的状态并不是

1.Vuex Vue每个项目都需要引入的，当我们的项目有很多个页面，并且这些页面共享着多个数据状Vuex态，此时我们可以引入Vuexo有三个核心的概念，其中为存放数据的地方，

2.Vuex statamutations,actions,state中的函数作用则是用来修改中一般是用了处理一些异步操作的函数mutations state,actions除了上面三个概念还有就像中的计算属性

3.Vuex getters,moudles,getters Vue一样用来描述依赖响应式状态中的复杂逻辑则是可以将分割成computed Statemoudles Store模块（）每个模块都拥有自己的等，在大型应用中经常用到module,state,mutations,actions场景当我们异步获取结果并赋值给的时候，比如数据请求，我们可以在

4.state中进行数据请求，拿到结果通过它的方法调用中修改的函数，从actions dispatchmutations state而将结果赋值给了statePinia其实就是它和的主要区别有以下几点pinia Vuex5,Vuex使用更简单，更符合开发者的开发习惯

1.Pinia中没有了状态的修改可以直接进行修改,或者在中修改,

2.pinia mutations,state actions或者使用它的方法进行修改$patch中没有了如果想使用多个直接使用定义多个

3.pinia modules,Store,defineStore Store传入不同的即可id更好的支持，不需要创建自定义的复杂包装器来支持

4.TS TSvue2-Mixin混入。