面试题

如何理解MVVM

MVVM，View - 是 HTML 显示页面，ViewModel - 业务逻辑层（一切 JS 可视为业务逻辑，比如表单按钮提交，自定义事件的注册和处理逻辑都在 ViewModel 里面负责监听两边的数据）。Model - 数据层对数据的处理（增删改查），MVVM 是把 MVC 里的Controller 和 MVP 里的 Presenter 改成了 ViewModel。Model + View + ViewModel。View 的变化通过 ViewModel 更新到数据层，数据层更新时，会通过 ViewModel 更新到视图层。这种自动同步是因为 ViewModel 中的属性实现了 Observer，当属性变更时都能触发对应得操作。
AngularJS，Vue.js等库均是 MVVM 模式。

vue如何监听数组的变化

先获取原生 Array 的原型方法，因为拦截后还是需要原生的方法帮我们实现数组的变化。
对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。
把需要被拦截的 Array 类型的数据原型指向改造后原型。

vue虚拟dom

Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用
虚拟dom进行diff，算出最小差异，然后再修改真实dom。
vue的virtual dom的diff算法是基于snabbdom算法改造而来，与react的diff算法一样
仅在同级的vnode间做diff，递归的进行同级vnode的diff，最终实现整个DOM树的更新。
虚拟DOM的缺点：

1. 代码更多，体积更大
2. 内存占用增大
3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快

vue模板编译原理

将 模板字符串 转换成 element ASTs
对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化
使用 element ASTs 生成 render 函数代码字符串