8 道高频出现的 Vue 面试题及答案

前言

本文讲解 8 道高频出现的 Vue 面试题及答案。

复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！

注意：文章的题与题之间用下划线分隔开，答案仅供参考。

笔者技术博客首发地址  GitHub^[1]，欢迎关注。

Vue

对 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 都采用这种模式。

---

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

• Vue 是异步执行 DOM 更新。

• 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。

• 如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。

• 然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。

• 当刷新队列时，组件会在事件循环队列清空时的下一个 tick