vue进阶面试题

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

另外给你们欢迎关注个人公众号：bb妞，里面有不少前端干货与你共享。