vue面试题合集（强烈推荐）

2022 最新 Vue 面试题
1、Vue 的最大的优势是什么？（必会）
2、Vue 和 jQuery 两者之间的区别是什么？（必会）
3、MVVM 和 MVC 区别是什么？哪些场景适合？（必会）
4、Vue 数据双向绑定的原理是什么?（必会）
5、Object.defineProperty 和 Proxy 的区别（必会）
6、Vue 生命周期总共分为几个阶段？（必会）
7、第一次加载页面会触发哪几个钩子函数？（必会）
8、请说下封装 Vue 组件的过程？（必会）
9、Vue 组件如何进行传值的? （必会）
10、组件中写 name 选项有什么作用？（必会）
11、Vue 组件 data 为什么必须是函数（必会）
12、讲一下组件的命名规范（必会）
13、怎么在组件中监听路由参数的变化？（必会）
14、怎么捕获 Vue 组件的错误信息？（必会）
15、Vue 组件里的定时器要怎么销毁？（必会）
16、Vue-cli 用自定义的组件？有遇到过哪些问题吗？（必
17、Vue 中 solt 的使用方式，以及 solt 作用域插槽的用法
18、Vue 该如何实现组件缓存?（必会）
19、跟 keep-alive 有关的生命周期是哪些？（必会）
20、Vue 常用的修饰符都有哪些？（必会）
21、Vue 常用的指令都有哪些？并且说明其作用（必会）
22、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）
23、指令 v-el 的作用是什么?（必会）
24、v-show 和 v-if 指令的共同点和不同点?（必会）
25、为什么避免 v-if 和 v-for 用在一起（必会）
26、watch、methods 和 computed 的区别?（必会）
27、怎么在 watch 监听开始之后立即被调用？（必会）
28、watch 怎么深度监听对象变化？（必会）
29、computed 中的属性名和 data 中的属性名可以相同吗？ （必会）
30、什么是 Vue 的计算属性（必会）
31、Vue 中 key 值的作用是什么？（必会）
32、Vue-loader 是什么？使用它的用途有哪些？（必会）
33、Vue 中怎么自定义过滤器（必会）
34、你是怎么认识 Vuex 的?（必会）
35、Vuex 的 5 个核心属性是什么?（必会）
36、Vuex 的出现解决了什么问题?（必会）
37、简述 Vuex 的数据传递流程（必会）
38、Vuex 的 Mutation 和 Action 之间的区别是什么？（必
39、Vue-router 是干什么的，原理是什么？（必会）
40、路由之间是怎么跳转的？有哪些方式？（必会）
41、Vue-router 怎么配置路由（必会）
42、Vue-router 有哪几种路由守卫?（必会）
43、Vue-router 的钩子函数都有哪些?（必会）
44、路由传值的方式有哪几种(必会)
45、怎么定义 Vue-router 的动态路由?怎么获取传过来的动态参数?
46、JQuery 和 params 之间的区别是什么？（必会）
47、r o u t e 和 route 和route和router 的区别是什么？（必会）
48、active-class 属于哪个组件中的属性？该如何使用？
49、Vue 的路由实现模式：hash 模式和 history 模式（必
50、请说出路由配置项常用的属性及作用（必会）
51、编程式导航使用的方法以及常用的方法（必会）
52、Vue 怎么实现跨域（必会）
53、Vue 中动画如何实现（必会）
54、你对 Vue.js 的 template 编译的理解？（必会）
55、Vue 渲染模板时怎么保留模板中的 HTML 注释呢？
56、Vue2.0 兼容 IE 哪个版本以上吗？（必会）
57、Vue 如何去除 URL 中的#（必会）
58、说一下你在 Vue 中踩过的坑（必会）
59、在 Vue 中使用插件的步骤（必会）
60、Vue 项目优化的解决方案都有哪些？（必会）
61、使用 Vue 的时候一下加载造成页面卡顿，该如何解决？
62、请说出 Vue.cli 项目中 src 目录每个文件夹和文件的用
63、你知道 style 上加 scoped 属性的原理吗？（必会）
64、说说你对 SPA 单页面的理解，它的优缺点分别是什么？（必会）
65、怎样理解 Vue 的单向数据流？（必会）
66、VNone 是什么？什么是虚拟 DOM？（高薪常问）
67、Vue 中如何实现一个虚拟 DOM？说说你的思路（高薪
68、Vue 中操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的话有什么解决办法？（高薪常
69、Vue 中如何重置 data? （高薪常问）
70、如何对 Vue 首屏加载实现优化? （高薪常问）
71、Vue 的 nextTick 的原理是什么? （高薪常问）
72、在 Vue 实例中编写生命周期 hook 或其他
73、is 这个特性你有用过吗？主要用在哪些方面？（高薪常
74、scss 是什么？在 Vue-cli 中的安装使用步骤是？有哪几大特性？（高薪常问）
75、请详细介绍一些 package.json 中的配置的作用（了解）
1、Vue 的最大的优势是什么？（必会）
Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟
DOM、运行速度快，并且作者是中国人尤雨溪，对应的 API 文档对国内开发者优化，作为前端
开发人员的首选入门框架
Vue 的优势：
1、Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。
2、Vue.js 最突出的优势在于可以对数据进行双向绑定。
3、使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能
显示出非常好看的效果。
4、相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页
面。
5、vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和
dom，这样大大加快了访问速度和提升用户体验。
6、而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率。

2、Vue 和 jQuery 两者之间的区别是什么？（必会）
1、jQuery 介绍：
jQuery 曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使
用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏
览器端的实现，jQuery 的使用率将会越来越低
2、vue 介绍：
vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM
模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数
据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，react 都
是大同小异，本质上都是基于 MVVM 的理念，然而 vue 以他独特的优势简单，快速，组合，紧
凑，强大而迅速崛起
3、vue 和 jQuery 区别：
3.1）vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取
值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对
象，而数据和界面是在一起的

3.2）比如需要获取 label 标签的内容：）选取 DOM 对象，对其进行赋值、取值、事件
绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据
和界面是在一起的
3.3）比如需要获取 label 标签的内容：(“lable”).val();,它还是依赖 DOM 元素的值。
Vue 则是通过 Vue 对象将数据和 View 完全分离开来了
3.4）对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，
他们通过 Vue 对象这个 vm 实现相互的绑定，这就是传说中的 MVVM

3、MVVM 和 MVC 区别是什么？哪些场景适合？（必会）
1、基本定义
1.1）MVVM 基本定义
MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）
指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式
的核心，它是连接 view 和 model 的桥梁。它有两个方向：
1.1.1）一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到
的页面，实现的方式是：数据绑定，
1.1.2）二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。
实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定
1.2）MVC 基本定义
MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和
MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑，使用 MVC 的目的就是将
M 和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model，必须通过 Controller 来承上启
下
2、使用场景
主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC
中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验，vue 数据驱动，通
过数据来显示视图层而不是节点操作， 场景：数据操作比较多的场景，需要大量操作 DOM 元
素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁
琐的操作 DOM 元素
3、两者之间的区别
MVC 和 MVVM 其实区别并不大，都是一种设计思想， MVC 和 MVVM 的区别并不是
VM 完全取代了 C，只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念，
ViewModel 存在目的在于抽离 Controller 中展示的业务逻辑，而不是替代 Controller，其它视图
操作业务等还是应该放在 Controller 中实现，也就是说 MVVM 实现的是业务逻辑组件的重用，
使开发更高效，结构更清晰，增加代码的复用性

4、Vue 数据双向绑定的原理是什么?（必会）
V ue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫
持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1、需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和
getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
2、compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将
每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更
新视图
3、Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
3.1）在自身实例化时往属性订阅器(dep)里面添加自己
3.2）自身必须有一个 update()方法
3.3）待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile
中绑定的回调，则功成身退。
4、MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通 Observer
来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起
Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) ->
数据 model 变更的双向绑定效果

5、Object.defineProperty 和 Proxy 的区别（必会）
Object.defineProperty 和 Proxy 的区别如下:
1、Proxy 可以直接监听对象而非属性；
2、Proxy 可以直接监听数组的变化；
3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等
是 Object.defineProperty 不具备的
4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而
Object.defineProperty 只能遍历对象属性直接修改
5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准
的性能红利
6、Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,
而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重
写

6、Vue 生命周期总共分为几个阶段？（必会）
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模
板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
1、beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调
用
2、created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data
observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目
前不可见
3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用
4、mounted
el 被新创建的 vm.e l 替换，并挂载到实例上去之后调用该钩子，如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m . el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂载了 一个文档内元素，当 mounted 被调用时 vm.el替换&#x