vue：响应式驱动+模板编译
（1）模板编译
将模板（.vue 文件或 HTML 模板）编译为 渲染函数（Render Function）；
（2）响应式依赖收集
-
初始化时，通过
Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持数据，建立 Getter/Setter。 -
渲染函数执行时，触发数据的 Getter，收集依赖（Watcher）。
（3）虚拟 DOM 与 Diff
- 渲染函数生成 虚拟 DOM（轻量级 JS 对象描述 DOM 结构）。
- 数据变化时，重新运行渲染函数生成新虚拟 DOM，通过 Diff 算法 对比新旧节点，计算最小更新。
优化策略
-
模板静态提升：编译时标记静态节点，跳过 Diff。
-
补丁标志（Patch Flags）：标记动态绑定的属性，减少对比范围。
-
组件级更新：每个组件有自己的渲染上下文，数据变化只影响当前组件。
react: 虚拟dom+显式触发状态变更
(1)JSX 编译
JSX 被 Babel 编译为 React.createElement() 调用，生成 虚拟 DOM 元素（React Element）
(1)协调（Reconciliation）
-
状态变化时，重新执行组件函数，生成新的虚拟 DOM 树。
-
通过 Diff 算法 对比新旧虚拟 DOM，找出差异。
(3) 优化策略
-
Fiber 架构（React 16+）：将渲染任务拆分为可中断的微任务，避免阻塞主线程。
-
React.memo / useMemo：手动控制组件和值的缓存。