前端交互模式演变

从纯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新特性， 低版本浏览器不支持