今天我是面试官#

vue 中 key 的功能是什么？#

• 用于虚拟节点树之间，diff 时更好地比较 如果不设置 key，或者用 index 作为 key 会有什么问题？

为什么用 vuex，不用 event bus？ 这两者有什么区别？#

vue router 的实现原理#

• Location   href, path
• 知道多页面应用中，如何区分前端路由和后端路由？
• 路由哈希模式和 history 模式的区别 -
• 把 nextTick 中的回调放到事件循环的微任务队列中。

1. vue 发送请求在 created 生命周期钩子中，尽量避免 DOM 渲染挂载后再发送请求，更新数据，更改 DOM；
2. vue router 组件懒加载；
3. index.html 文件控制在 14kb 之内，这是基于 TCP 的慢开始规则，第一个响应包的大小就是 14kb，应该包含浏览器开始渲染页面所需的所有内容，或者至少包含页面模板（第一次渲染所需的 CSS 和 HTML）

以头条为例，采用组件化方式设计一个信息流？#

• 组件功能抽象能力
• 组件设计思路
• 功能划分：多种文章显示格式，刷新提示，评论/媒体/时间等信息显示，refresh/loadmore 功能，dislike 功能，动态广告
• 卡片形式抽象：单图、多图、无图、视频、ugc、刷新条等

要求：有清晰思路，良好的信息流组件设计模式，可扩展性强并给出核心功能的实现方式

请简述什么是双向数据绑定和单向数据流，以及它们的区别#

双向数据绑定

双向数据绑定意味着 UI 动态地绑定到模型数据，这样当 UI 改变时，模型数据就随之变化，反之亦然。

单向数据流

单向数据流意味着 model 是唯一来源。UI 触发消息的变化，将用户行为标记为 model。只有 model 具有访问更改应用程序状态的权限。其效果是数据总是朝一个方向流动，这使得理解起来更容易。

二者有什么优缺点

单向数据流是确定性的，数据流动方向可以跟踪，流动单一，追查问题的时候可以跟快捷。缺点就是写起来不太方便。要使 UI 发生变更就必须创建各种 action 来维护对应的 state 双向绑定，优点是使用方便，值和 UI 双绑定，但是由于各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，子组件修改父组件，兄弟组件互相修改有有违设计原则

可以介绍一下模板引擎的原理，比如实现类似 html 这种模板将其中变量替换为对应值的方式。

介绍下你所理解的 MVVM 框架，如 Angular、React、Vue 都解决了什么问题？#

要求：能够从每个框架的生态系统，甚至结合之前的项目及不同的业务特点，给出框架的优劣

Vue 框架中组件消息通信方式#

父子之间层级过多时，当父子组件之间层级不多的时候，父组件可以一层层的向子组件传递数据或者子组件一层层向父组件发送消息，代码上没有太难维护的地方。可是，一旦父子组件之间层级变多后，传递一个数据或者发送一个消息就变得麻烦。这块如果了解开源的 Element 组件库，就会知道其实现方式：构造一个函数自动向上/向下查询父亲节点，以[组件名, 消息名, 参数]三元组进行消息传递，降低长链传播成本;

具体实现参考：https://github.com/ElemeFE/element/blob/dev/src/mixins/emitter.js

如何理解虚拟 DOM?#

对虚拟 dom 和 diff 算法中的一些细节理解

https://github.com/livoras/blog/issues/13

要求：写出 diff 算法的核心部分