【前端面试】39道Vue高频面试题，亲测有效！！！快来看看呀！！

最新推荐文章于 2024-09-11 01:17:30 发布

Milk595

最新推荐文章于 2024-09-11 01:17:30 发布

阅读量9.2k

点赞数 17

分类专栏：前端面试 Vue.js 文章标签： vue 面试前端

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108210170

版权

前端面试同时被 2 个专栏收录

55 篇文章 8 订阅

订阅专栏

Vue.js

20 篇文章 2 订阅

订阅专栏

Vue高频面试题

1.说下你常用的Vue指令？

v-bind：动态绑定数据
v-on：绑定事件监听器
v-for：循环指令，可以循环数组或对象
v-model：实现双向绑定
v-if：根据表达式的真假值，判断是否渲染元素，会销毁并重建
v-show：显示隐藏元素，修改元素的display属性

2.v-if和v-show的区别是什么？

切换元素时，v-if会销毁并重建元素，v-show是修改display属性，来做到显示和隐藏。

v-show项目用处：回到顶部组件的显示隐藏，v-if项目用处：登陆方式切换。

3.v-if和v-for的优先级

当 v-if与 v-for 一起使用时，v-for具有比v-if更高的优先级，这意味着v-if 将分别重复运行于每个v-for 循环中。所以，不推荐 v-if 和 v-for 同时使用。如果 v-if 和 v-for一起用的话，vue中的的会自动提示 v-if应该放到外层去。

4.v-for中key作用

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点

5.说下Vue的生命周期

beforeCreate：在实例创建之间执行，数据是未加载状态。
created：在实例创建、数据加载后，能初始化数据，DOM渲染之前执行。
beforeMount：虚拟DOM已创建完成，在数据渲染前最后一次更改数据。el未挂载。
mounted：页面、数据渲染完成。el挂载完毕。可以访问DOM节点。
beforeUpdate：重新渲染之前触发。不会造成重渲染。
Updated：数据已经更新完成，DOM也重新render完成，更改数据会陷入死循环。
`beforeDestroy：实例销毁前执行，实例仍然完全可用。
destroyed：实例销毁后执行，这时候只剩下DOM空壳。

6.第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

7.简述每个周期具体适合哪些场景

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create： data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory： Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed：这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

8.vue获取数据在哪个周期函数?

一般 created/beforeMount/mounted皆可，比如如果你要操作 DOM , 那肯定mounted时候才能操作

9.Vue如何去除URL中的#？

将路由的hash模式改为history模式

10.`$route`和`$router`的区别?

$router为VueRouter实例，$route为当前路由

11.vue-router有哪3种导航钩子?

全局导航：router.beforeEach(to, from, next) 作用：跳转前进行判断拦截
组件内钩子
单独路由独享组件

12.vue-router的两种模式

hash模式：即地址栏 URL 中的 # 符号
history模式： window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）

13.$NextTick是做什么的？

$nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用

14.Vue-router跳转和location.href有什么区别?

使用 location.href= /url来跳转，简单方便，但是刷新了页面；使用 history.pushState( /url )，无刷新页面，静态跳转；引进 router，然后使用 router.push( /url ) 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。其实使用router跳转和使用 history.pushState()没什么差别的，因为vue-router就是用了 history.pushState() ，尤其是在history模式下

15.vue常用的修饰符

.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡
.prevent ：等同于 JavaScript 中的 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture ：与事件冒泡的方向相反，事件捕获由外到内
.self ：只会触发自己范围内的事件，不包含子元素
.once ：只会触发一次

16.Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过 数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

17.vue组件中data为什么必须是一个函数？

因为 JavaScript 的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。组建中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data ，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data ，这样改一个全都改了。

18.params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

19.computed、watch、methods的区别

computed要有返回值，支持缓存。
watch不支持缓存。
methods：不支持缓存。

watch项目用处：

搜索框输入框的监听
监听路由地址的改变

20.keep-alive

可以实现组件缓存，当组件切换时不会对当前组件进行卸载
有include、exclude两个属性，可以有条件的进行组件缓存
两个钩子函数activated/ deactivated,用来得知当前组件是否处于活跃状态
keep-alive项目用处：页面跳转保留当前位置。

21.父子组件通信

父组件向子组件传值使用props属性
子组件向父组件传值使用自定义方法通过$emit触发
父组件访问子组件$children（获取全部）、$refs（获取指定的）
子组件访问父组件$parent、$root（根组件）

22.兄弟组件通信

事件总线 Vue.prototype.$bus = new Vue()
Vuex

23.监听组件原生事件

给对应的事件加上native修饰符，才能进行监听

24.单页面应用的优缺点

优点：

良好的交互体验。
良好的前后端工作分离模式。
减轻服务器压力。

缺点：

SEO难度较高。
前进、后退管理。
初次加载耗时多。

25.讲一下MVVM?

MVVM是Model-View-ViewModel缩写，是把MVC中的Controller演变成ViewModel,Model层代表数据模型，View代表视图UI，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据

具体请看下面博客：
https://blog.csdn.net/weixin_43352901/article/details/108137551

26.路由守卫

具体请看下面博客：
https://blog.csdn.net/weixin_43352901/article/details/107640535

27.请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

28.vue如何获取dom？

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

29.v-on可以监听多个方法吗？

可以

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

30.assets和static的区别?

这两个都是用来存放项目中所使用的静态资源文件。

两者的区别：

assets中的文件在运行npm run build的时候会打包，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到static中。

static中的文件则不会被打包。

建议：将图片等未处理的文件放在assets中，打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。

31.vue初始化页面闪动问题?

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：在css里加上以下代码

[v-cloak] {
    display: none;
}

如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

32.vuex中有几个核心属性，分别是什么？

具体请看下面博客：
https://blog.csdn.net/weixin_43352901/article/details/107573405

33.ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

34.vuex中的数据在页面刷新后数据消失问题？

用sessionstorage 或者 localstorage 存储数据

存储： sessionStorage.setItem('名',JSON.stringify(值) )
使用： sessionStorage.getItem('名') ---得到的值为字符串类型，用JSON.parse()去引号；

35.怎么在组件中批量使用Vuex的getter属性？

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

36.组件中重复使用mutation？

使用mapMutations辅助函数,在组件中这么使用

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

然后调用this.setNumber(10)相当调用this.$store.commit(‘SET_NUMBER’,10)

37.mutation和action有什么区别？

具体请看下面博客：
https://blog.csdn.net/weixin_43352901/article/details/107573405

38.在v-model上怎么用Vuex中state的值？

需要通过computed计算属性来转换

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}