主流前端框架的实现原理
主流前端框架的原理可以用一个公示概括：UI = f(state)
- UI：视图
- f：框架内部运行机制
- state：状态
即：框架根据状态渲染视图。
主流前端框架的工作原理都是一样的，它们的区别主要在于更新粒度。
框架有三级抽象：应用、组件、节点，因此主流前端框架分三级更新粒度：应用级、组件级、节点级。
节点级更新框架原理（代表作有 Sevlte、Solid.js）：
- 将状态变化可能导致的节点变化编译为具体方法（预编译）（网站中实际运行的代码是预编译后的代码）
- 监听状态变化（采用“发布订阅”的设计模式）（细粒度更新）
- 当交互导致状态变化，直接调用具体方法改变对应视图
组件级更新框架原理（代表作有 Vue）：
- Vue2：虚拟 DOM + 细粒度更新
- Vue3：虚拟 DOM + 预编译 + 细粒度更新（升级）
应用级更新框架原理（代表作有 React）：
- 状态变化
- 创建一棵完整的虚拟 DOM 树
- 将变化的部分更新到视图
Vue 和 React 区别？
Vue 和 React 两者的定位是类似的，他们都是用来处理 UI 层的框架。但是
- Vue 提倡渐进式处理，可以选择性的添加相应的功能；React 没有渐进式，若使用 React，则需要抛弃以前的东西如 JQuery，使用 Webpack、JSX 等
- Vue 推荐使用模板，即使用类似 HTML 的标签；同时 Vue 也支持 JSX 语法；React 需要使用 JSX 来写，但是并不支持类似 Vue 的模板语法
- Vue CSS 比较好用，通过 scope 可以很容易地实现组件 CSS 的作用域；React 需要引入第三方库，如 styled-component 等
- Vue 监听数据的变化，若数据发生变化，Vue 会先记录下来，然后更新；Vue2 开始引入了 DOM Diff，但是只是为了提高效率和支持 SSR，不影响更新策略；React 需要使用新数据代替旧数据，通过 DOM Diff 算法对比两次虚拟 DOM 的差异，去更新 UI
- Vue 有 keep-alive，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存；React 没有 keep-alive。体现在：临时数据（如 input 框中未提交的数据）、切换页面时滚动高度等
- Vue 中尤雨溪提供主要功能，如 Vuex、Vue Router、Vue CLI 等；React 只推出了 React、React CLI，其他功能推荐大家使用第三方库，如使用 Redux、Mobx 等进行数据管理，React Router 进行路由管理
