前端面试常见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 组件间通信六种方式

  1. props/$emit

  2. $emit/$on(eventBus)

$emit():分发;$on():监听;$off():取消监听。

  1. vuex

  2. $attrs/$listeners

  3. provide/inject

  4. $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 选项有什么作用?

  1. 项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤

  2. DOM 做递归组件时需要调用自身 name

  3. 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).

28.$nextTick用过吗,有什么作用?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

解决的问题:有些时候在改变数据后立即要对dom进行操作,此时获取到的dom仍是获取到的是数据刷新前的dom,无法满足需要,这个时候就用到了$nextTick。

29.页面中定义一个定时器,在哪个阶段清除?**为什么要销毁它?**

在 beforeDestroy 中销毁定时器。

在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。

30.组件中data为什么是函数

因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离。

而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

31.vue中data的属性可以和methods中的方法同名吗?为什么?

不可以,因为Vue会把methods和data的东西,全部代理到Vue生成的对象中,会产生覆盖所以最好不要同名。

32.怎么给vue定义全局的方法?

Vue.prototype.方法名称

33.怎么解决vue打包后静态资源图片失效的问题?

将静态资源的存放位置放在src目录下

34.怎么解决vue动态设置img的src不生效的问题?

因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require。

35.什么是vuex?在那种场景下使用?

vuex是全局状态管理工具,它有以下几个核心部分组成:

1.state:存储数据;

2.mutations:定义的方法动态修改Vuex 的 store 中的状态或数据。

3.actions:调用mutations方法,更新state数据;

4.getters:对state中的数据进行预处理;

5.modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
程序员吾非同的头像-程序员知识精选

昵称

取消
昵称表情代码图片