Web前端工程师面试之Vue问题汇总解析

又是一年毕业季，很多学习前端的同学面对激烈的求职竞争倍感压力，想要了解企业招聘会提问哪些问题。今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师面试中有关Vue的问题及解析。

1、Vue是什么?

Vue.js是一个构建数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。

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

Vue实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应监听回调。

3、Vue如何去除URL中的#

vue-router默认使用hash模式，所以在路由加载的时候，项目中的URL会自带“#”。如果不想使用“#”，可以使用vue-router的另一种模式history：

new Router({

mode: 'history', routes: [ ]

})

需要注意的是，当我们启用history模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现“404”的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个“index.html”页面。

4、Vue生命周期的理解

Vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程。

beforeCreated()：在实例创建之间执行，数据未加载状态。

created()：在实例创建、数据加载后，能初始化数据，DOM渲染之前执行。

beforeMount()：虚拟DOM已创建完成，在数据渲染前最后一次更改数据。

mounted()：页面、数据渲染完成，真实DOM挂载完成。

beforeUpadate()：重新渲染之前触发。

updated()：数据已经更改完成，DOM也重新render完成，更改数据会陷入死循环。

beforeDestory()和destoryed()：前者是销毁前执行(实例仍然完全可用)，后者则是销毁后执行。

5、说一说单向数据流和双向数据绑定的优缺点

单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种action来维护对应的state。

双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时debug的难度。

6、vue-router路由实现

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

7、v-if和v-show区别

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成。

v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏。

8、$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法。

$route为当前router跳转对象里面可以获取name、path、query、params等。

9、Vue组件data为什么必须是函数

因为JS本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响了。

10、jQuery、Vue有什么不同

jQuery专注视图层，通过操作DOM去实现页面的一些逻辑渲染;Vue专注于数据层，通过数据的双向绑定，最终表现在DOM层面，减少了DOM操作。Vue使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发。

Vue是高级Web前端工程师必须要掌握的工具之一，也是企业考察的重点知识。当然，想要求职成功拿高薪，掌握面试题只是一方面，你还需要系统全面的知识和对应的项目经验。想了解更多关于Web前端求职面试技巧，可以关注“千锋郑州校区”微信公众号。