作者： 神说要有光来源： 神说要有光
最早的时候页面是服务端渲染的，也就是 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 的更新 。
推荐阅读
- 请问一下1996年是什么年 1996是什么年
- 结肠是干嘛的 结肠是什么
- 大衣缩水怎么恢复原状，双面羊毛大衣缩水后怎么恢复
- 52有什么特殊意思吗 52是什么
- 脸型大全男 脸型是什么
- 保护跳闸是什么意思 跳闸是什么
- 玫瑰有什么称号 玫瑰是什么花
- 隆字的含义是什么意思 高的意思是什么
- 交警的职责跟权限范围 交警是什么