想成功就业Web前端工程师，想要高薪就业，不只要掌握Web技能，还需懂得面试技巧和面试时常见面试题做好面试时的准备。小科今日整理了五道前端常见面试题及答案解析，希望对您Web前端学习或面试提供参考。

Web前端面试题1：vue有什么生命周期？new Vue到vm.$destory的经历了什么

解析：生命周期：

初始化阶段：beforeCreate和create

挂载阶段：beforeMount和mounted

更新阶段：beforeUpdate和update

卸载阶段：beforeDestory和destory

过程：

当new Vue()后，首先会初始化事和生命周期，接着会执行beforeCreate生命周期钩子，在这个钩子里面还拿不到this.$el和this.$data`;

接着往下走会初始化inject和将data的数据进行侦测也就是进行双向绑定；

接着会执**create钩子函数**，在这个钩子里面能够拿到this.$data还拿不到this.$el`;到这里初始化阶段就走完了。

然后会进入一个模版编译阶段，在这个阶段首先会判断有没有el选项如果有的话就继续往下走，如果没有的话会调用vm.$mount(el);

接着继续判断有没有template选项，如果有的话，会将template提供的模版编译到render函数中；如果没有的话，会通过el选项选择模版；到这个编译阶段就结束了。（温馨提示：这个阶段只有完整版的Vue.js才会经历，也是就是通过cmd引入的方式；在单页面应用中，没有这个编译阶段，因为vue-loader已经提前被编译好，因此，单页面使用的vue.js是运行时的版本）。

模版编译完之后（这里说的是完整版，如果是运行时的版本会在初始化阶段结束后直接就到挂载阶段），然后进入挂载阶段，在挂在阶段首先或**触发beforeMount**钩子，在这个钩子里面只能拿到this.$data还是拿不到this.$el;`

接着会执**mounted钩子**，在这个钩子里面就既能够拿到this.$el也能拿到this.$data`；到这个挂载阶段就已经走完了，整个实例也已经挂载好了。

当数据发生变更的时候，就会进入更新阶段，首先会触发beforeUpdate钩子，然后触updated钩，这个阶段会重新计算生成新的Vnode,然后通过patch函数里面的diff算法，将新生成的Vnode和缓存中的旧Vnode进行一个比对，最后将差异部分更新到视图中。

当vm.$destory被调用的时候，就会进入卸载阶段，在这个阶段，首先触发beforeDestory钩子接着触发destoryed钩子，在这个阶段Vue会将自身从父组件中删除，取消实例上的所有追踪并且移除所有的事件监听。

到这里Vue整个生命周期就结束了。

Web前端面试题2：Vue中$route和$router的区别？

解析：$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

Web前端面试题3：Vue中computed和watch的区别？

解析：computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。 watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

Web前端面试题4：虚拟DOM的优劣如何？

解析：优点：

保证性能下限： 虚拟DOM可以经过diff找出最小差异，然后批量进行patch,这种操作虽然比不上手动优化，但是比起粗暴的DOM操作性能要好很多，因此虚拟DOM可以保证性能下限

无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的，我们无需手动操作DOM,极大提高开发效率

跨平台： 虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便的跨平台操作，例如服务器渲染、移动端开发等等

缺点：

无法进行极致优化： 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化，比如VScode采用直接手动操作DOM的方式进行极端的性能优化

Web前端面试题5：虚拟 DOM 的优缺点？

优点：

保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； 无需手动操作DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率； 跨平台： 虚拟 DOM 本质上是JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便的跨平台操作，例如服务器渲

染、weex 开发等等。

缺点:

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

在找工作时，做好前期准备很重要，了解意向公司的行业和基本业务，了解平台页面的计算机语言形式，对于该公司由较深的了解也很重要。第二是对于个人专业能力有基本认知，了解个人不足，再提前查好意向公司的岗位需求，针对性的去完善个人能力。从各个平台上找一些面试官常问面试题，做好提前准备。预祝各位同学面试顺利，都能找到一份理想的工作。

特殊说明：以上内容资料由开课吧提供！