Vue 面试题

前端面试指南 — vue 篇面试题

Vue不会出现在笔试中，所以这些需要全部准备好，这一关过就已经七七八八了。不过vue多问的除了基本知识，比较多的是问题解决方案，需要一定的项目经验，对于新人，可以掌握基础点，如  果面试的是初级，那项目问题一般不会很多，可以准备几个到时候用，如果是中级，那就需要多找  项目遇到的难点，到时候可以吹水了，比如webpack等。

考点 1：vue 的理解

问题：什么是 MVVM？

MVVM 是Model-View-ViewModel 的缩写， Model 代表数据模型， 定义数据操作的业务逻辑， View 代表 UI 组件， 它负责将数据模型转化成 UI 展现出来， ViewModel 通过双向绑定把 View 和Model 进行同步交互，不需要手动操作 DOM 的一种设计思想。

问题：Vue 的优点？Vue的缺点？

优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

问题：Vue跟React的异同点

相同点：

1. 都使用了虚拟dom
2. 组件化开发
3. 都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
4. 都支持服务端渲染不同点：

1. React的JSX，Vue的template
2. 数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty) 3.React单向绑定，Vue双向绑定

4.React的Redux，Vue的Vuex

问题：请说说双向绑定实现的原理？

采用数据劫持结合发布者- 订阅者模式的方式， 通过 Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时， Vue 将遍历它的属性， 用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖， 在属性被访问和修改时通知变化。

问题：请说说你对“渐进式框架”的理解？

所说的“渐进式”，其实就是 vue 的使用方式，同时也体现了 vue 的设计的理念，渐进式代表的含义是：主张最少。

我们在使用过程中，可以通过添加组件系统、客户端路由 vue-router、大规模状态管理 vuex 来构建一个完整的框架。

更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。

问题：Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

1. jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2. jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
3. Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
4. Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

问题：请说说什么是虚拟 DOM?

Virtual Dom 是一个 JS 对象，通过对象的方式来表示 DOM 结构。将页面的状态抽象为 JS 对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。处理机制，将多次 DOM 修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改 DOM 的重绘重排次数，提高渲染性能。

在代码渲染到页面之前，vue 会把代码转换成一个对象(虚拟 DOM)。以对象的形式来描述真实 dom

结构，最终渲染到页面。在每次数据发生变化前，虚拟 dom 都会缓存一份，变化之时，现在的虚拟dom 会与缓存的虚拟 dom 进行比较。

在 vue 内部封装了 diff 算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。 另外现代前端框架的一个基本要求就是无需手动操作 DOM，一方面是因为手动操作 DOM 无法保证程序性能，省略手动 DOM 操作可以大大提升开发效率。

考点 2：生命周期

问题：说说 vue 生命周期的做用是什么？

vue 的生命周期中有多个钩子函数，让咱们在控制整个 vue 实例的过程当中，更容易造成良好的逻辑。

问题：请详细说下你对    vue   生命周期的理解，分别有哪些阶段？（会读最好，不会读用中文说）

总共分为 8 个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1. 创建前

beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化。

1. 创建后

created 阶段，vue 实例的数据对象 data 有了，$el 还没有。

1. 载入前

beforeMount 阶段， vue 实例的$el 和 data 都初始化了， 但还是挂载之前为虚拟的 dom 节点， data.message 还未替换。

1. 载入后

在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

1. 更新前

当 data 变化时，会触发 beforeUpdate 方法。

1. 更新后

当 data 变化后，会触发 updated 方法。

1. 销毁前

beforeDestory 阶段，在执行 destroy 方法时会触发。

1. 销毁后

destoryed 阶段，在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。

1. dctivated阶段，被 keep-alive 缓存的组件激活时调用。
2. deactivated阶段&#x