从纯JS操作DOM，到JQuery，Angular，再到现在流行的Vue，React，前台交互模式也从0到1，从MVC到MVVM，此文将这段历史汇总为表格，仅供参考。
| 交互模式 | 特点 | 缺点 |
|---|---|---|
| 纯JS | 手撸操作DOM | 代码写起来很繁琐 |
| JQuery | 封装了DOM操作API，网络操作等，解放生产力 | 善于解决静态HTML （加载完成后绑定事件）， 不适合SPA |
| MVC | controller：解决路由；监听DOM事件；触发视图渲染view：页面渲染（解决DOM，比方模板渲染） model：数据  mvc.pngcontroller到view为单向流 | view层负责DOM渲染，功能还是略复杂的， 下一步需要减少 view层逻辑 |
| MVP | presenter：解决路由；监听DOM事件；获取/升级视图；渲染页面view：模板定义 model：数据 mvp.pngview和model只提供数据，逻辑操作都集中在presenter | presenter和view为手动双向绑定，需要显式调用 view.update()等方式升级视图 |
| MVVM | 自动化的MVP框架，presenter和view为自动双向绑定（产出指令的概念） mvvm.png | 需要了解指令 （指令为自己设置的执行函数，如 v-text, v-on, v-html, v-model等） |
MVVM模式下，最重要的就是数据变更检测。视图数据变更比较好监听，无非就是监听form表单的那些HTML标签，如input, select, texarea等等。
假如model变更，viewModel在获取到新数据之后，如何及时升级视图呢？这才是MVVM核心需要解决的问题。
| 数据变更检测方式 | 特点 | 框架 | 缺点 |
|---|---|---|---|
| 手动模式 |  手动模式.png | 无 | 全页面扫描， 全页面升级 |
| 脏检查 |  脏检查.png | Angular | 假如指令太多， 低效 |
| 数据劫持 |  数据劫持.png这个示例图比较简单，可以参考VUE2.0如何追踪数据变化，Vue的设计更加精巧，有watcher将指令和依赖绑定到一起 | Vue | 强依赖Proxy或者Object.defineProperty新特性，低版本浏览器不支持 |
