从纯JS操作DOM，到JQuery，Angular，再到现在流行的Vue，React，前端交互模式也从0到1，从MVC到MVVM，此文将这段历史汇总为表格，仅供参考。
交互模式 | 特点 | 缺点 |
|---|---|---|
纯JS | 手撸操作DOM | 代码写起来很繁琐 |
JQuery | 封装了DOM操作API，网络操作等，解放生产力 | 善于处理静态HTML（加载完成后绑定事件），不适合SPA |
MVC | controller：处理路由；监听DOM事件；触发视图渲染view：页面渲染（处理DOM，比如模板渲染） model：数据 mvc.png controller到view为单向流 | view层负责DOM渲染，功能还是略复杂的，下一步需要减少view层逻辑 |
MVP | presenter：处理路由；监听DOM事件；获取/更新视图；渲染页面view：模板定义 model：数据 mvp.png view和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新特性，低版本浏览器不支持 |
