一、核心设计理念的差异
-
组件形态的底层实现
- Vue ：组件编译后是包含 render/setup 方法的对象（通过 vue-loader 或 @vitejs/plugin-vue 将 SFC 转换为对象）。
- React ：组件本质是函数 （函数组件）或类（类组件），JSX 会被 Babel 编译为
React.createElement调用。
-
模板与 JSX 的编译差异
- Vue ：模板（Template）在编译阶段会被优化为可追踪依赖的渲染函数，通过静态分析实现靶向更新。
- React ：JSX 编译为纯 JavaScript 函数调用，依赖开发者手动优化（如
React.memo）。
二、响应式系统的实现
| 维度 | Vue | React |
|---|---|---|
| 数据绑定 | 基于 Proxy/Object.defineProperty 的响应式系统，自动追踪依赖 | 基于状态（State）的不可变数据流，需手动触发更新 |
| 更新粒度 | 组件级 + 属性级靶向更新（通过虚拟 DOM 的 Block Tree 优化） | 组件级更新（默认全量 Diff，依赖 Fiber 调度优化） |
| 触发方式 | 响应式数据变更自动触发渲染 | 需调用 setState 或 Hooks 函数触发更新 |
三、虚拟 DOM 与 Diff 算法
-
Vue 的靶向更新
-
编译时标记动态节点（如
{``{ count }}），Diff 时仅对比动态部分。 -
示例：
html<!-- 编译后生成 Block 标记 --> <h1>count的值是: {{ count }}</h1>
-
-
React 的 Fiber 架构
- 将 Diff 过程拆分为可中断的时间切片，优先处理高优先级任务（如动画）。
- 全量 Diff 但通过 Fiber 链表结构实现增量更新。
四、函数式编程的演进
| 框架 | 方案 | 底层实现差异 |
|---|---|---|
| Vue | Composition API | 基于响应式系统的 setup 函数，依赖闭包管理状态 |
| React | Hooks | 依赖链表结构维护状态顺序，要求 Hooks 调用顺序稳定 |
五、编译时优化对比
| 优化策略 | Vue | React |
|---|---|---|
| 静态提升 | 将静态节点提取为常量 | 无原生支持 |
| 树结构优化 | Block Tree 减少 Diff 范围 | 依赖开发者手动优化 |
| 预字符串化 | 将静态 HTML 编译为字符串常量 | 不支持 |
总结
- 相同点：虚拟 DOM、组件化、支持函数式编程。
- 核心差异 ：
- Vue 通过编译时优化 + 响应式系统实现细粒度更新 ，React 依赖运行时调度（Fiber）实现可控的更新优先级。
- Vue 的渐进式设计 降低上手门槛，React 的函数式理念提供更高灵活性。