共计 2533 个字符，预计需要花费 7 分钟才能阅读完成。
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
另外给大家欢迎关注我的公众号：bb 妞，里面有很多前端干货与你共享。