VUE的面试题分享-好程序员

　　VUE 的面试题 分享- 好程序员， 现在前端面试中会有很多VUE 的面试题， Vue 框架部分小编整理了几个频率比较高的面试题，希望可以帮助到正在面试的你，没准下次的面试里就会出现这个题目哦， web 前端面试中关于 VUE 的面试题（含答案）

　　 1 对 MVC 、 MVP 、 MVVM 的理解

　　 MVC 模式的意思是，软件可以分成三个部分。

　　 视图（View ）：用户界面。

　　 控制器（Controller ）：业务逻辑。

　　 模型（Model ）：数据保存。

　　 各部分之间的通信方式如下。View 传送指令到 Controller ， Controller 完成业务逻辑后，要求 Model 改变状态， Model 将新的数据发送到 View ，用户得到反馈，所有通信都是单向的（逆时针）。

　　 MVP 模式将 Controller 改名为 Presenter ，同时改变了通信方向。各部分之间的通信，都是双向的（顺时针）。 View 与 Model 不发生联系，都通过 Presenter 传递。 View 非常薄，不部署任何业务逻辑，称为 " 被动视图 " （ Passive View ），即没有任何主动性，而 Presenter 非常厚，所有逻辑都部署在那里。 MVVM 模式将 Presenter 改名为 ViewModel ，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（ data-binding ）： View 的变动，自动反映在 ViewModel ，反之亦然。 Angular 和 Ember 都采用这种模式。

　　 2 如何理解 Vue 是异步执行 DOM 更新的 ？

　　 Vue 是异步执行 DOM 更新。只要观察到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环 tick 中， Vue 刷新队列并执行实际 ( 已去重的 ) 工作。 Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel ，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。

　　 当刷新队列时，组件会在事件循环队列清空时的下一个 tick 更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着 “数据驱动” 的方式思考，避免直接接触 DOM ，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

　　 3 深入响应式原理之如何追踪变化

　　 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项， Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 getter/setter 。

　　 Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

　　 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。观察者订阅了可观察对象，当可观察对象发布事件，则就直接调度观察者的行为，所以这里观察者和可观察对象其实就产生了一个依赖的关系。

　　 4 说下对 Virtual DOM 算法的理解 ？

　　 包括几个步骤：

　　 1 、用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中；

　　 2 、当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异；

　　 3 、把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。 Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。 CPU （ JS ）只操作内存（ Virtual DOM ），最后的时候再把变更写入硬盘（ DOM ）。