一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
前端发展史
早期90年代，受限于网速，都是静态页面，前端只是美工切图和用HTML+CSS布局。后来后端变得越来越复杂，用MVC模式(JSP)把数据渲染到前端。
2004年，在Ajax出现后，前端可以异步的获取数据并且刷新页面，从此前端不受限后端模板，也就是web2.0时代的到来，从此前端工程师也作为一个独立工种出现。
再后来，由于有浏览器和兼容性问题，jQuery风靡全球，前端基本就是jQuery+BootStrap一把梭。用$找到元素去做DOM操作。
在2009年时，AngularJS和Node.js诞生，AngularJS引领了前端MVVM模式的诞生，而Node.js让前端有了入侵后端的能力，加速了前端工程化的诞生。
MVVM模式是不允许数据和视图直接通信，需要通过ViewModel通信，ViewModel是连接View和Model的中间件。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新；ViewModel能够监听到视图的变化，并能够通知数据发生变化。
前端三大框架
在MVVM模式下，不同框架的目标相同，就是利用数据驱动页面，但是每个框架对于处理数据的变化不同，也走出了不同的路线。
不同的地方实际上就是当数据发生变化时，如何通知页面更新。
- Angular 1，是脏检查，每次用户交互时都检查数据是否变化，有变化就更新DOM。简单粗暴。
- Angular，抛弃了Angular1，引入了TypeScript，RxJS等内容，不向前兼容，这可能也是没有国内大规模推广的原因。
- Vue1，使用响应式，初始化时watcher监听数据的每个属性，当数据发生变化时，根据key去针对性修改对应的DOM。
- React，在页面初始化时，在浏览器DOM之上做了虚拟DOM，利用JavaScript对象描述整个DOM树，通过对比新老虚拟DOM diff计算出变化的数据然后做精确的DOM操作修改，同时也能大幅提升性能。
Vue和React的区别
在Vue框架下，如果数据变了，框架会主动告诉你修改了哪些内容；而React的数据变化后，是通过计算新老数据的Diff来知道数据是否变化的。
虽然他们都解决了数据变化后通知页面更新，但是都遇到了性能的瓶颈。
- Vue响应式，新建Watcher监听，比较损耗性能，项目大了之后每个数据都有一个watcher会影响性能。
- React用的是虚拟DOM的Diff，但如果虚拟DOM树过大，计算时间超过16.6ms，就可能造成卡顿。
为了解决性能问题，Vue和React走上了不同的路。
虚拟DOM和响应式区别
-
React借鉴了操作系统分片的概念，引入了Fiber架构，将整个DOM树变为链表，然后利用浏览器的空闲时间来计算Diff，一旦浏览器有需求，再将主线程还给浏览器。
左侧是以前用的树形结构，但是树形结构通常遍历是用递归，但是递归是很难中断的。而Fiber树则是将树结构改造为了链表，遍历严格按照子元素→兄弟元素→父元素的逻辑，随时可以中断和恢复Diff的计算过程
-
Vue1由于响应式数据过多，也会让内存占用过多，Vue2引入了虚拟DOM解决响应式数据过多的问题。对于Vue2来说组件之间的变化，可以通过响应式来通知更新。而组件内部数据变化，通过虚拟DOM去更新页面。这样对响应式的监听是在组件级别，而虚拟DOM的更新，在组件内部。
模板
而不仅仅是响应式和虚拟DOM，Vue和React在模板上也不同，Vue用的是template，而React用的是JSX。
React世界中只有JSX，JSX最终会在Compiler那一层被编译成JS，因此React拥有了JS的动态性，也是为什么React的API比较少，主要还是用JS本身的语法和特性。
而Vue世界用的template，语法是有限定的，比如v-if、v-for等语法。Vue3在虚拟DOM上做了进一步的优化。
思考 Vue3为什么不引入Fiber吗
因为Fiber解决的是虚拟DOM过大导致性能问题，而Vue将虚拟DOM控制在了组件级，引入的话会增大系统复杂性，但是收益不大。
