前端面试常见Vue面试题汇总

1．Vue的优点：

1．双向数据绑定：vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。

2．组件化开发：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数，然后再分别写好各种组件的实现，然后整个应用就算做完了。

3．运行时性能：在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重新渲染。

4．Virtual DOM：简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

5．灵活性：Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

6．轻量高效：Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。

2．vue.js的两个核心是什么？

数据驱动和组件化。

3．列举vue的几种常用指令　

v-if、v-show、v-for、v-on、v-bind、v-model、v-once

4．vue有哪些修饰符

1．事件修饰符：stop、prevent、self、once

2．键盘修饰符：enter、space、up、down

3．表单修饰符修饰符：number、trim、lazy

5．请分别说出vue修饰符trim、number、lazy的作用

1．trim:用来过滤前后的空格

2．number:将用户输入的数据绑定为number类型

3．lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步

6．vue事件修饰符怎么使用，举例说明

1．<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
2．<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
3．<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
4．<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
5．<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
6．<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

...

7．Vue 组件间通信有哪些方式?

Vue 组件间通信六种方式

props/$emit
$emit/$on（eventBus）

$emit()：分发；$on()：监听；$off()：取消监听。

vuex
$attrs/$listeners
provide/inject
$parent/$children 与 ref

8．vue中子组件调用父组件的方法

1．直接在子组件中通过this.$parent.event来调用父组件的方法。

2．在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行；

3．父组件把方法传入子组件中，在子组件里直接调用这个方法。

9．vue router 跳转方式

1．this.$router.push()

this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})

获取参数：{{this.$route.query.userId}}

this.$router.push({name: 'detail',params:{id: 'abc'}})

获取参数：{{this.$route.params.userId}}

2．query和params 的区别：

query要用name来引入，params要用path来引入

3．query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数。

10．$route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

11．vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract，默认 hash 模式。

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器，带一个#；

history : 依赖 HTML5 History API 和服务器配置，不带#，具体可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

12．vue-router 有哪些钩子函数?

1．全局前置守卫 router.beforeEach

2．全局解析守卫 router.beforeResolve

3．全局后置钩子 router.afterEach

4．路由独享的守卫 beforeEnter

5．组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

13．Vue常用的路由守卫有哪些，怎么设置，使用场景等

常用的两个路由守卫：router.beforeEach 和 router.afterEach

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。

在项目中，一般在beforeEach这个钩子函数中进行路由跳转的一些信息判断。

判断是否登录，是否拿到对应的路由权限等等。

14．组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

15．介绍下什么是keep-alive

keep-alive是用于做组件缓存的，只会执行一次，不会被销毁。被keep-alive包裹的组件，没有create和beforeDestroyed等方法，但是有activated和deactivated方法。

1．activated：当组件激活时，钩子触发的顺序是created->mounted->activated

2．deactivated: 组件停用时会触发deactivated，当再次前进或者后退的时候只触发activated。

16．vue中如何解决页面不重新渲染问题

1．修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值')；

2．使用this.$forceUpdate()方法可重新渲染页面。

17．computed和watch的区别

computed:

1．computed是计算属性,也就是计算值,它更多用于计算值的场景

2．computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

3．computed适用于计算比较消耗性能的计算场景

watch:

1．更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作

2．无缓存性，页面重新渲染时值不变化也会执行

小结:

1．当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed

2．如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

18．Vue实例中的所有生命周期钩子是什么？

每个Vue实例在创建、挂载和销毁时都要经过一系列步骤，同时，它还将运行称为生命周期钩子的函数，使我们有机会在特定阶段添加自己的代码，下面是一个Vue实例生命周期的过程：

1．beforeCreate——创建钩子中的第一个钩子。它们允许我们在将组件添加到DOM之前执行操作。我们无法访问其中的DOM。进行数据和方法的初始化；

2．created——这个钩子可以用来在创建实例后运行代码，我们可以访问活性数据，但是模板和虚拟DOM还没有被加载或呈现。已经完成数据和方法的初始化；

3．beforeMount—beforeMount钩子恰好在初始呈现发生之前以及模板或呈现函数编译之后运行，很可能我们永远都不需要使用这个钩子。开始渲染dom。

4．mounted——我们可以完全访问响应性组件、模板和呈现的DOM，这是最常用的钩子。可以渲染dom；

5．beforeUpdate—此钩子在组件上的数据更改和更新周期开始后运行，是在修补和重新呈现DOM之前运行。data中的数据即将被更新；

6．updated-这个钩子在我们的组件上的数据改变和DOM重新渲染后运行。如果我们需要在属性更改后访问DOM，这里可能是最安全的地方。data中的数据更新完毕；

7．beforeDestroy—这个钩子将在销毁实例之前运行，果我们需要清理事件或被动订阅，这里就是合适的地方。实例即将销毁；

8．destroyed—这个钩子将被用来做任何最后一分钟的清理。实例已被销毁；

19．异步请求适合在哪个生命周期调用？

官方实例的异步请求是在mounted生命周期中调用的，而实际上也可以在created生命周期中调用。

20．什么是路由懒加载？

路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度

21．Vue动态加载组件的四种方式

1．使用import导入组件，可以获取到组件；

2．使用import导入组件，直接将组件赋值给componet；

3．使用require 导入组件，可以获取到组件；

4．使用require 导入组件，直接将组件赋值给componet。

22．v-if 和 v-show 有什么区别？

以下是v-show和v-if指令之间的一些主要区别：

1．如果表达式通过，则v-if将元素呈现给DOM，而v-show将所有元素呈现给DOM，然后使用CSS display属性根据表达式显示/隐藏元素。

2．v-if支持v-else和v-else-if指令，而v-show不支持else指令。

3．v-if有更高的切换成本，因为它每次添加或删除DOM，而v-show有更高的初始渲染成本，也就是说，v-show具有性能优势，而v-if在初始渲染时间方面具有优势。

23．Vue中的$parent是什么？

与$root类似，$parent属性可用于从子实例访问父实例。尽管它提供了直接访问，但是它使应用程序难于测试和调试，我们很难找到突变的来源。

与$parent一样，Vue也提供了$child，但是可以使用它来访问子实例。

24．虚拟DOM实现原理?

1．虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象

2．状态变更时，记录新树和旧树的差异

3．最后把差异更新到真正的dom中

25．虚拟DOM的优劣如何?

优点:

1．保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限

2．无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率

3．跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

缺点:

1．无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化。

26．vue 双向绑定原理？

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue3.x是用ES6的语法 Proxy对象来实现的，它也可以实现数据的劫持。

相比于vue2.x，使用proxy的优势如下：

1．defineProperty只能监听某个属性，不能对全对象监听；

2．可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）；

3．可以监听数组，不用再去单独的对数组做特异性操作；

4．vue3.x可以检测到数组内部数据的变化。

27．Vue中的key到底有什么用？

key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

优点：

1．准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.

2．快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).