作者： 神说要有光来源： 神说要有光
最早的时候页面是服务端渲染的，也就是 PHP、JSP 那些技术，服务端通过模版引擎填充数据，返回生成的 html，交给浏览器渲染。那时候表单会同步提交，服务端返回结果页面的 html。
后来浏览器有了 ajax 技术，可以异步的请求，服务端返回 xml 或者 json。ajax 最早是基于 xml 的，这也是它名字的由来。因为 xml 多了很多没必要的标签，内容比较多，所以后来 json 流行开来。
网页和服务端的数据交互变成了异步的，可以服务端返回 json 数据，浏览器里拼接 html，之后渲染(浏览器里面生成 dom 就等同于渲染)。页面基本没啥刷新的必要了，于是后来就逐渐演变出了单页应用 SPA(single page application)。
早期开发页面的时候就是基于浏览器的 dom api 操作 dom 来做渲染和交互，但是 dom api 比较啰嗦，而且当时浏览器的兼容性问题也比较麻烦，不同浏览器有不同的写法。为了简化 dom 操作和更方便的兼容各种浏览器，出现了 jquery 并且迅速流行开来，那个时代 jquery 是如日中天的。
我一直习惯把网页分为物理层和逻辑层，dom 就算是物理层，jquery 是操作 dom 的一系列工具函数，也是工作在物理层。
网页做的事情基本就是拿到数据渲染 dom，并且数据改变之后更新 dom，这个流程是通用的，后来逐渐出现了 mvvm 框架，来自动把数据的变更映射到 dom，不再需要手动操作 dom。也就是 vue、react 等现代的前端框架。我把这一层叫做逻辑层。
前端框架除了提供了数据驱动视图变化的功能以外，还支持了 dom 的逻辑划分，可以把一部分 dom 封装成组件，组件和组件之间相互组合，构成整个界面。物理层依然是 dom，只是实现了数据到 dom 的自动映射之后，我们只需要在逻辑层写组件就可以了。
现在前端入门也不会再学物理层的操作 dom 的 jquery 了，而是直接从 vue、react 这种逻辑层的前端框架开始。
但是也不是说完全不需要 jquery，前端框架主要解决的是数据到 dom 的绑定，可以变化以后自动更新 dom。如果不需要更新，那么直接操作 dom 即可，比如各种活动页，没啥数据更新，用 jquery 操作 dom 还是很方便。
前端框架是 UI = f(state) 这种声明式的思想，只需要声明组件的视图、组件的状态数据、组件之间的依赖关系，那么状态改变就会自动的更新 dom。而 jquery 那种直接操作 dom 的工具函数库则是命令式的。
对于视图的描述这件事 react 和 vue 用了不同的方案，react 是给 js 扩展了 jsx 的语法，由 babel 实现，可以在描述视图的时候直接用 js 来写逻辑，没啥新语法。而 vue 是实现了一套 template 的 DSL，引入了插值、指令、过滤器等模版语法，相对于 jsx 来说更简洁，template 的编译器由 vue 实现。
vue template 是受限制的，只能访问 data，prop、method，可以静态的分析和优化，而 react 的 jsx 因为直接是 js 的语法，动态逻辑比较多，没法静态的做分析和优化。
但是 vue template 也不全是好处，因为和 js 上下文割裂开来，引入 typescript 做类型推导的时候就比较困难，需要单独把所有 prop、method、data 的类型声明一遍才行。而 react 的 jsx 本来就是和 js 同一个上下文，结合 typescript 就很自然。
所以 vue template 和 react jsx 各有优缺点。
前端框架都是数据驱动视图变化的，而这个数据分散在每个组件中，怎么在数据变化以后更新 dom 呢?
数据变化的检测基本只有三种方式：watch、脏检查、不检查。
vue 就是基于数据的 watch 的，组件级别通过 Object.defineProperty 监听对象属性的变化，重写数组的 api 监听数组元素的变化，之后进行 dom 的更新。
angular 则是基于脏检查，在每个可能改变数据的逻辑之后都对比下数据是否变了，变了的话就去更新 dom。
更多好内容，请关注：破作文 - pozuowen.com