从纯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
watcher将指令和依赖绑定到一起 |
Vue | 强依赖Proxy或Object.defineProperty新特性，低版本浏览器不支持 |
