# 发展史

1. 浏览器
2. JavaScript
3. Ajax
4. jQuery+Bootstrap
5. AngularJS，前端 MVVM
6. Node.js， 后端+前端工程化
7. 三大框架：Angular、React、Vue

在前端 MVVM 模式下，不同框架的目标都是一致的，就是<mark style="color:red;">利用数据驱动页面</mark>。但是怎么处理数据的变化，各个框架走出了不同的路线。

1. Angular 1，<mark style="color:purple;">脏检查</mark>。每次用户交互时都检查一次数据是否变化，有变化就去更新 DOM
2. 新框架 Angular，引入了 TypeScript、RxJS 等新内容，但是不支持向前兼容
3. Vue 1，<mark style="color:red;">响应式</mark>。初始化时，Watcher 会监听数据的每个属性，这样当数据发生变化时，就能精确地知道数据的哪个 key 变了，然后去针对性修改对应的 DOM
4. React，<mark style="color:red;">虚拟 DOM</mark>。用一个 JavaScript 对象来描述整个 DOM 树，通过虚拟 DOM 计算出变化的数据，然后进行精确的修改。浏览器操作 DOM 一直都是性能杀手，而虚拟 DOM 的 Diff 的逻辑，又能够确保尽可能少的操作 DOM，这也是虚拟 DOM 驱动的框架性能一直比较优秀的原因之一。
   * 模板是 JSX。最终 JSX 都会在 Compiler 那一层，也就是工程化那里编译成 JS 来执行，所以 React 最终拥有了全部 JS 的动态性
   * 所以 React 的 API 一直很少，只有 state、hooks、Component 几个概念，主要都是 JavaScript 本身的语法和特性。
5. 性能优化，React，引入了 <mark style="color:purple;">Fiber 架构</mark>，借鉴了操作系统时间分片的概念。把整个虚拟 DOM 树微观化，变成链表，然后我们利用浏览器的空闲时间计算 Diff，从而解决了卡顿的问题。
6. 性能优化，Vue 2，引入了 <mark style="color:purple;">虚拟 DOM</mark>。使用虚拟 DOM 解决了响应式数据过多的内存占用问题，又良好地规避了 React 中虚拟 DOM 的问题， 还通过虚拟 DOM 给 Vue 带来了跨端的能力。
   * 组件之间的变化，可以通过<mark style="color:purple;">响应式</mark>来通知更新。组件内部的数据变化，则通过虚拟 DOM 去更新页面。如此便把响应式的监听器，控制在了组件级别，而虚拟 DOM 的量级也控制在了组件的大小
   * 组件内部是没有 Watcher 监听器的，而是通过虚拟 DOM 来更新，每个组件对应一个监听器，大大减小了监听器的数量
   * 模板是 template
   * 相关细节：
     1. 使用 <mark style="color:orange;">Flow.js</mark> 来做类型校验（Facebook）
     2. 响应式是基于 Object.defineProperty() 实现的，拦截某个属性
     3. 社区的二次开发难度较高，因为 Vue 2 的内部运行时是直接执行浏览器 API
        * 跨端时，要么直接进入 Vue 源码中 Weex 文件夹
        * 要么复制一份全部 Vue 的代码，把浏览器 API 换成客户端或者小程序
     4. Options API
7. Vue3，全面升级，性能+扩展性+包的大小
   * 在虚拟 DOM 的静态标记上做到了极致，让静态的部分越过虚拟 DOM 的计算，真正做到了按需更新，很好的提高了性能。
   * 相关细节：
     1. 使用 <mark style="color:orange;">TypeScript</mark> 做类型校验
     2. 响应式是基于 Proxy 实现的（Vue 3 不兼容 IE11 以下的浏览器）
     3. 对于 Vue 的二次开发，自定义渲染器让开发跨端应用时更加得心应手
     4. 拆包，使用 monorepo 管理，内部解耦
     5. Composition API，组合 API，好处是：
        * 打包时减小包的大小，import 对 Tree-shaking 很友好
        * 方便 TS 进行类型推导
        * 方便代码复用
        * 方便开发（见下图）
     6. 内置新组件
        * Fragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div
        * Teleport: 允许组件渲染在别的元素内，在开发弹窗组件时特别有用
        * Suspense: 异步组件，更方便开发有异步请求的组件
     7. 打包工具 Vite（竞品 Webpack），提升开发体验，利用了浏览器已支持 ES6 的 import
     8. RFC 机制，团队开发的工作方式
8. 框架 Svelte。没有虚拟 DOM，直接把模板编译成原生 DOM，几乎没有 Runtime，所有的逻辑都在 Compiler 层优化，算是另外一个极致

![](https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2FjlE4XPMgaulFWNJQYBrn%2Fimage.png?alt=media\&token=c7599337-492e-4a69-8d92-397dcba23c75)![](https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2FAlNC0v7l4NEnlHNkTJ3U%2Fimage.png?alt=media\&token=fe92815a-4c6f-4e48-a692-e205ba5b513f)

参考：

* [https://time.geekbang.org/column/article/427660](https://time.geekbang.org/column/article/427660)
* [https://time.geekbang.org/column/article/428904](https://time.geekbang.org/column/article/428904)
