主流前端框架都遵循组件化开发模式，根据更新粒度可以分为应用级、组件级和节点级。他们的实现原理均为UI=f(state)
即框架内部的运行机制根据状态渲染视图
应用级代表:React
组件级代表：Vue
节点级代表：Svelte、SOLID
一、 节点级更新框架原理
- 预编译：将状态变化可能导致的节点变化编译为具体方法
- 细腻度更新
- 监听状态变化：采用发布订阅者模式，创建一个状态之后，会为状态维护一张“订阅该状态变化的表”，所有需要监听该状态的函数都会在该状态表中注册，每当状态变化，都会遍历这张表。
- 当监听导致状态变化直接调用具体方法改变对应视图
二、 应用级更新框架原理
采用虚拟DOM技术。首屏渲染时，React会根据应用的树结构创建一颗对应的虚拟DOM树，当状态更新后，React生成一颗完整的虚拟DOM树，新生成的每个节点会与之前的虚拟DOM树的同级节点进行比较，如果存在差异，则记录该差异，然后将记录的不一致渲染到视图上。
二、 组件级更新框架原理
Vue在状态更新后，不生成整个虚拟DOM树，只生成发生改变的DOM树。
主要使用细腻度更新和虚拟DOM，Vue3中引入了预编译
参考：
『货很干』主流前端框架的实现原理，懂完了你_哔哩哔哩_bilibili
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
