前端人必背的高频Vue面试题汇总！

vue是一个用于创建用户界面的开源JavaScript框架，旨在更好地组织与简化Web开发，它也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

对于前端人来说，虽然css、html、js是主要的基础知识，但是随着技术的不断发展，出现了很多优秀的mv*框架以及小程序框架，掌握并熟练运用这些框架是必不可少的。所以，很多企业在面试题中都会涉及到Vue相关的问题。下面小职就为大家整理了一些前端面试中经常出现的Vue高频面试题，有需要的可以收藏备用。

 

一、讲述Vue的MVVM的理解

M是模型（Model）：数据模型；负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。

V是View 视图，负责页面展示，也就是用户界面。主要由 HTML 和 CSS 来构建

VM是视图模型（View-Model），负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反映到View 上。

二、Vue 中常用的修饰符有哪些？

1、事件修饰符

• stop  阻止事件继续传播

•  prevent  阻止标签默认行为

• self  只当在 event.target 是当前元素自身时触发处理函数

• once  事件将只会触发一次

• capture  用事件捕获模式,元素自身触发的事件先在此处处理，然后交由内部元素处理

• passive  告诉浏览器你不想阻止事件的默认行为

• native  如果在自定义组件标签上绑定原生事件，则需要加上.native

2、表单修饰符

• lazy  当光标离开标签时，才会将值赋值给value

• trim  过滤掉两边的空格

• number  自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

3、鼠标按钮修饰符

• left

• right

• Middle

4、键盘修饰符

• enter

• tab

• delete

• esc

• space

• up

• down

• left

• right

5、系统修饰键

• ctrl

• alt

• shift

• Meta

6、v-bind修饰符

• sync

• props

• camel

三、vue和react有什么区别？

React是一个用于创建可重用且有吸引力的UI组件的库。它非常适合经常变化的数据的组件。使用React，我们可以通过将它们分解为组件来构建可重用的用户界面，它的使用使得构建交互式UI非常容易

Vue.js是一个开源JavaScript框架，能够开发单页面应用程序。它还可以用作Web应用程序框架，目的在于简化Web开发。它的流行有很多原因，其中一个关键原因是它能够在没有任何动作的情况下重新渲染，它允许构建可重用，是一个小巧但功能强大的组件而且允许我们在需要时随时添加组件。

总之如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js，如果是大规模应用程序和移动应用程序的应该选择React。

四、怎样动态加载路由？

使用场景：后管系统，处理不同角色，不同权限，显示不同菜单。

目的：根据需求，动态加载路由，处理后台返回的不同菜单权限。

方法一：注册所有路由，根据后台返回菜单数据，显示菜单。

弊端：路由全部注册，菜单没有显示；用户可以手动更改url值，依然会显示当前组件。

方法二：前端手动写好，根据不同的角色，创建多个不同的路由，根据登录的角色，动态地加载某个数组。

弊端：如果后台新增角色，那么只有修改前端代码，重新部署。

方法三（推荐）：菜单动态生成路由映射

菜单->url->路由->path->component（数组，routes）

后台返回的菜单，有url；url对应的是路由里面的path；path对面不同的组件。

1、菜单中有加载组件的名称component（名称/路径必须和前端写好的一致，不可移动组件位置）

2、（推荐）直接根据菜单的url。查找前端代码中的对应关系。生成数组routes

五、v-model的理解？

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1）v-bind绑定一个value属性；
2）v-on指令给当前元素绑定input事件

六、vue中的v-cloak的理解？

使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

一般用于解决网页闪屏的问题，在对一个的标签中使用v-cloak，然后在样式中设置[v-cloak]样式,[v-cloak]需写在 link 引入的css中，或者写一个内联css样式，写在import引入的css中不起作用。

七、Vue 数据双向绑定的原理

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

v-model 的本质就是一个语法糖, 内部做了两件事

1.给组件绑定了一个 value 属性

2.给组件绑定了一个 input 事件, 事件触发时将绑定的变量重新赋值

八、v-for中的key的理解？

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确地识别此节点。主要是为了高效地更新虚拟DOM。

九、Vue 的最大的优势是什么？

Vue可以进行组件化开发, 大量减少代码的编写，更易于理解。最突出的优势在于可以对数据进行双向绑定。相比传统的页面通过超链接的方式实现页面切换和跳转，vue 使用路由不会刷新页面。

vue是单页面应用,不用每次跳转页面都要请求所有数据和dom，提高了访问速度和用户体验，而且他的第三方组件库使用起来更加节省开发时间,从而提高开发效率

十、封装 Vue 组件的过程

使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据，如果需要给组件传入模板，则定义为插槽 slot。如果需要父组件主动调用子组件的方法可以在methods 选项中开放方法。

十一、vuex的使用？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，具体包括：

1、state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

2、getter：state的计算属性，类似vue的计算属性，主要用来过滤一些数据。

3、action：actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单地说就是异步操作数据。view 层通过 store.dispath 来分发 action。可以异步函数调用

4、mutation：mutations定义的方法动态修改Vuex 的 store 中的状态或数据

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

十二、Vue 组件如何进行传值的

1、父组件向子组件传递数据：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可。

2、子组件向父组件传递数据：子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。

十三、怎么捕获 Vue 组件的错误信息？

1、errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出。

2、errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底。

十四、vue-router有哪几种导航钩子？

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

十五、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

十六、vuex的State特性

1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象 里面的 data。

2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变， 依赖 这个数据的组件也会发生更新。

3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

十七、vuex的Getter特性

1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性 2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用 getters

十八、uex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作。

十九、Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及index.html 初始页面。

二十、Vue中组件性能优化的思路有哪些？

1、组件懒加载，当访问到某个路由时才动态加载该组件。

2、列表渲染使用key，将元素的唯一索引作为key，可以更大化理由dom节点，提升列表渲染性能。

3、使用函数式组件，渲染开销低，速度快，因为函数式组件只是个函数。

4、多使用v-show，少用v-if可以更快地实现渲染和响应，避免渲染停顿。

5、使用keep-alive，保持组件的数据缓存，避免被重新渲染。

二十一、Vue3.0的新特性有哪些？

1、性能提升，打包大小减少41%，内存使用减少54%，初次渲染快55%，更新快133%

2、组合式API(Componsition API)

3、更好的Typescript支持

4、底层响应式原理使用ES6的Proxy

二十二、Proxy和Object.defineProperty的区别是什么？

Proxy的意思是代理，可以代理对象上的操作，通过new方式创建对象，第一个参数是被代理的对象，第二个参数是对象操作的描述，实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用描述中对应的set,get方法

Object.defineProperty只能监听到单个属性的操作，而Proxy除读写外还可以监听属性的删除，方法的调用等。

vue2中我们想要监听数组的变化，基本要依靠重写数组的方法实现，vue3中Proxy可以直接监听数组的变化。

二十三、Vue的单页面应用的优缺点有哪些？

优点：

1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小

2、前后端分离，比如vue项目。

3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加的规范，便于修改和调整

缺点：

1、不支持低版本浏览器

2、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对较长

3、不利于SEO（搜索引擎）的优化，单页页面，数据在前端渲染，就意味着没有SEO

4、页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

作为一个前端人，想要在众多面试者中脱颖而出，就一定要熟记掌握上面的这些高频Vue面试题。只要在面试之前就做好充足的准备，在面试过程中做到临危不乱，正常发挥，就一定能够拿到一份满意的offer。