vue面试常遇到的面试题

最近面试了好几家公司，总结一下经常被问到的面试题。

首先呢，一开始先来一个自我介绍，没啥好说的。

接下来就是考验你vue技术的问题了

一些常见的面试题

vue的生命周期

一共有八个阶段，分别为创建前后，挂载前后，更新前后，销毁前后。重点回答是创建后和挂载后

beforeCreate：此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

created：在这个阶段vue实例已经创建，仍然不能获取DOM元素。但是可以首次拿到data中定义的数据。

beforeMount：得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。

mounted：DOM树渲染结束，可访问dom结构，

beforeUpdate：vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

updated：DOM会和更改过的内容同步。

beforeDestroy：在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发。

destryed。

vue的原理   （出自：https://zhuanlan.zhihu.com/p/138114429）

1、MVVM

vue是一个MVVM渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。

view：视图，代表ui组件

model：模型，代表data数据

viewmodel：监听模型数据，即data的改变和控制视图行为、处理用户交互。简单理解就是同步view和model的对象，连接model和view。

总结：在vue模式下，view和model没有直接的联系，它们通过viewmodel进行交互。model和viewmodel之间的交互是双向的，因此view数据的变化会同步到model中，而model中数据的改变也会立即反应到view上。

viewmodel通过双向数据绑定把view层和model层连接起来，而view和model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

2、响应式

vue的响应式原理核心是通过ES5的保护对象的Object.defindeProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了房问题属性，当读取data中的数据时自动调用get方法，当修改data中的数据时，自动调用set方法，检测到数据的变化，会通知观察者Watcher自动触发重新render当前组件（子组件不会重新渲染），生成新的虚拟DOM数，vue框架会遍历并对比新虚拟DOM树和旧虚拟DOM树中每个节点的差别，并记录下来，最后加载操作，将所有记录的不同点，局部修改到真实DOM树上。

组件间传参

父子组件间的传参：子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。

兄弟组件间的传参：1、bus传递，2、用过引入vuex轻松管理各组件之间通信。

vue路由的传参

1、通过动态路由方式

2、通过query传参

3、params传参

总结：

1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失

2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。

vue的哈希路由与历史路由的区别

hash模式url里面永远带有#，在开发中默认使用这个模式。

用户考虑url的规范就要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传。

下面是功能区别，在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式。

使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。

计算属性和watch的区别

watch侦听器是vue提供的一个响应数据的变化。当需要在数据变化时执行异步或者开销较大的操作时，选择watch更适合。

计算属性不仅仅是依赖的数据发生变化会触发改变该属性的值，我们也可以通过设置setter改变本身属性的值来改变它依赖的值。

watch是侦听一个参数，当这个参数发生变化时影响其他数据的变化。并且可以获得该参数的新值和旧值进行相应的计算。

通过以上叙述我们可以得知： watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）

computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响）

用过$nextTick，有什么作用，能解决什么问题。

nexttick在页面页面全部加载完成之后才执行。

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

解决的问题：有些时候在改变数据后立刻要对dom进行操作，此时获取到的dom仍是获取到数据刷新前的dom，无法满足需要，这时就用到了$nextTick。

vue中key的作用

key是v-for中使用的，唯一标识，如果没有，控制台会有警告。

vue的dom渲染是虚拟dom，数据发生变化时，diff算法会只比较更改的部分，如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单服用此处每个元素，并且确保它的特定索引下显示已被渲染过的没给元素。

举例：有一个列表我们现在在中间插入一个元素，diff算法会默认复用之前的列表并在最后追加一个，如果列表存在选中一类的状态，则会随着复用出现绑定错误的情况而不是跟着原元素，key的做就可以给它一个标识，让状态跟着数据渲染。

route和router的区别

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等。

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局对象，它包含了所有的路由中包含的关键对象和属性。

简单说一说vuex

vue与react的区别

你处理过浏览器哪些兼容问题

你工作上是怎么交接的

因为时间有限，暂时没更新完，明天会继续更

以后要是想到或者遇到别的问题也会继续更新。

本文全纯手敲，敲错什么术语或者敲错什么字的话，望指正。谢谢