Vue 和 React 的异同点

一、核心设计理念的差异

1. 组件形态的底层实现

   • Vue ：组件编译后是包含 render/setup 方法的对象（通过 vue-loader 或 @vitejs/plugin-vue 将 SFC 转换为对象）。
   • React ：组件本质是函数 （函数组件）或类（类组件），JSX 会被 Babel 编译为 React.createElement 调用。

2. 模板与 JSX 的编译差异

   • Vue ：模板（Template）在编译阶段会被优化为可追踪依赖的渲染函数，通过静态分析实现靶向更新。
   • React ：JSX 编译为纯 JavaScript 函数调用，依赖开发者手动优化（如 React.memo）。

---

二、响应式系统的实现

维度	Vue	React
数据绑定	基于 Proxy/Object.defineProperty 的响应式系统，自动追踪依赖	基于状态（State）的不可变数据流，需手动触发更新
更新粒度	组件级 + 属性级靶向更新（通过虚拟 DOM 的 Block Tree 优化）	组件级更新（默认全量 Diff，依赖 Fiber 调度优化）
触发方式	响应式数据变更自动触发渲染	需调用 setState 或 Hooks 函数触发更新

---

三、虚拟 DOM 与 Diff 算法

1. Vue 的靶向更新

   • 编译时标记动态节点（如 {``{ count }}），Diff 时仅对比动态部分。

   • 示例：

     <!-- 编译后生成 Block 标记 -->
     <h1>count的值是: {{ count }}</h1>

2. React 的 Fiber 架构

   • 将 Diff 过程拆分为可中断的时间切片，优先处理高优先级任务（如动画）。
   • 全量 Diff 但通过 Fiber 链表结构实现增量更新。

---

四、函数式编程的演进

框架	方案	底层实现差异
Vue	Composition API	基于响应式系统的 setup 函数，依赖闭包管理状态
React	Hooks	依赖链表结构维护状态顺序，要求 Hooks 调用顺序稳定

---

五、编译时优化对比

优化策略	Vue	React
静态提升	将静态节点提取为常量	无原生支持
树结构优化	Block Tree 减少 Diff 范围	依赖开发者手动优化
预字符串化	将静态 HTML 编译为字符串常量	不支持

---

总结

• 相同点：虚拟 DOM、组件化、支持函数式编程。
• 核心差异 ：
  • Vue 通过编译时优化 + 响应式系统实现细粒度更新 ，React 依赖运行时调度（Fiber）实现可控的更新优先级。
  • Vue 的渐进式设计 降低上手门槛，React 的函数式理念提供更高灵活性。