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