Virtual DOM

虚拟DOM，简称 VDOM，主要步骤。

1. 将元素描述的 UI 转为由 VDOM 描述的 UI。
2. 对比变化前后 "VDOM" 描述的 UI 计算出 UI 中发生变化的部分。

Vue 使用模版语法描述 UI，模版语法编译为 render 函数，其对应的两个步骤：

1. render 函数执行后返回 "VNode 描述的 UI"，这一步骤在 Vue 被称为 render。
2. 将变化前后 “VNode 描述的 UI” 进行比较，计算出 UI 中变化的部分，这一步在 Vue 中被称为 Patch。

React 使用 JSX 描述 UI，JSX 编译为 createElement 方法，其对应的两个步骤为：

1. createElement 方法执行后返回 "ReactElement 描述的 UI"
2. 将 "ReactElement 描述的 UI" 与变化前 “FiberNode 描述的 UI” 进行比较，计算出 UI 中变化的部分，同时生成本次更新 “FiberNode 描述的 UI”。

VDOM 的优点

1. VDOM 中元素属性比原生属性可以定制，减少冗余，减少内存开销。
2. 比 AOT 更强大的描述能力。
3. 多平台渲染的可能。VDOM 只描述 UI，具体的执行可以在其他端执行。

前端框架实现原理

有三种比较主流的框架

1. Svelte，主要依靠 AOT 编译，属于属性级框架。可以讲自变量变化直接绑定在属性上，无需 VDOM 的辅助。
2. Vue3，实现细粒度更新，组件级框架。一方面支持细粒度更新，另一方面因为使用模版，可以利用 AOT 降低更新复杂度。
3. React，应用级框架。通过时间切片，服务端组件等技术，提高应用的渲染及响应效率。

三种框架因为设计理念不同，其发展方向也各有所异。