vue面试题的介绍（附答案）

Vue 越来越受欢迎了。放眼国内外，不管是 BAT 等大厂，还是创业公司，Vue 都有广泛的应用。面试的时候，Vue 相关技术原理也一定是必考点。可以说，对于任何一个前端工程师来说，掌握 Vue 可能不是一个可选项，而更像一门“必修课”。

很多人做vue项目都是直接element ui等UI框架直接上，这些框架虽然在效率上帮了我们很多，但是，对于我们的技术提升而言，其实没有任何的提升，而对于面试官提问的vue核心技术，你也肯定回答不上来。

对于一位开发者来说，如果你对一个技术框架从来都是只停留在会用上，而从来不去了解这个框架里面核心技术的实现原理和背后的设计思想，我想在技术这条路上肯定走不远，我自己作为开发者我有非常深刻的体会.在这里也给大家做个走心的推荐，ant Design vue这个ui框架的作者在极客时间推出了一门课，叫vue开发实战（文章底部有购买链接）。我自己也购买了这门课，觉得讲的不错，会带着你掌握 Vue 的技术原理及其应用， 也会对其底层原理有所了解，并且通过实战项目，你将具备独立负责 Vue 前端项目的能力，对你的跳槽和面试以及vue的入门将会有非常大的帮助，很多购买者包括我自己也觉得这里面干货满满。推荐给大家有需要的人。

好了，进入正题，今天在这里给大家带来一点vue的进阶面试题。

1、什么是MVVM？
答：MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

3、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

4、vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

5、MVVM和MVC区别？和其他框架(jquery)区别？那些场景适用？
答：MVVM和MVC都是一种设计思想，主要就是MVC中的Controller演变成ViewModel,，MVVM主要通过数据来显示视图层而不是操作节点，解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度慢，影响用户体验问题。主要用于数据操作比较多的场景。
场景：数据操作比较多的场景，更加便捷

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

7、请说下封装vue组件的过程？
答：首先，组件可以提升整个项目的开发效率能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低，难维护，复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在道具中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用发射方法

8、聊聊你对Vue.js的模板编译的理解
答：简而言之，就是先转化成AST树，再得到的渲染函数返回VNODE（Vue公司的虚拟DOM节点）
详情步骤：

首先，通过编译编译器把模板编译成AST语法树（抽象语法树即源代码的抽象语法结构的树状表现形式），编译是createCompiler的返回值，createCompiler是用以创建编译器的。负责合并选项。

然后，AST会经过生成（将AST语法树转化成渲染功能字符串的过程）得到渲染函数，渲染的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名，子节点，文本等等）

9、<keep-alive></keep-alive>的作用是什么，如何使用？
答：包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染；
使用：简单页面时
缓存： <keep-alive include=”组件名”></keep-alive>
不缓存：<keep-alive exclude=”组件名”></keep-alive>

10、vue和react区别
答：相同点：都鼓励组件化，都有’props’的概念，都有自己的构建工具，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

不同点：React：数据流单向，语法—JSX，在React中你需要使用setState()方法去更新状态。Vue：数据双向绑定，语法--HTML，state对象并不是必须的，数据由data属性在Vue对象中进行管理。适用于小型应用，但对于对于大型应用而言不太适合。

11、v-show和v-if指令的共同点和不同点?
v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

12、$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

13、vue中 key 值的作用
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

以上就是vue面试题的介绍（附答案）的详细内容，更多请关注Gxl网其它相关文章！