标签

note

前端框架

React

Vue

字数

2098 字

阅读时间

9 分钟

Vue 和 React 作为当前最流行的前端框架，在底层设计、性能表现及优化思路上存在显著差异。以下从底层原理、性能差异、优化方向、核心异同点及场景选择展开全面分析，帮助开发者精准选型。

一、底层原理差异

1. 核心设计理念

• Vue：采用渐进式框架设计，更注重“易用性”和“声明式直观性”。 核心思想是通过模板语法（HTML 模板 + 指令）将视图与数据绑定，开发者可按 HTML/CSS/JS 分离模式编写代码，框架内部自动处理数据与视图的映射关系。
• React：采用组件化与函数式编程思想，强调“UI = f(state)”（视图是状态的函数）。 核心是通过 JSX（JavaScript 语法扩展）将 HTML 逻辑嵌入 JS 中，所有视图渲染逻辑由 JS 控制，贴近“一切皆 JS”的编程范式。

2. 数据响应式原理

• Vue：
  • 2.x 版本：通过 Object.defineProperty 劫持对象的 getter/setter 监听数据变化，结合依赖收集（每个响应式数据对应依赖列表），数据变化时触发对应组件重新渲染。
  • 3.x 版本：升级为 Proxy，支持监听数组索引、对象新增属性（解决 2.x 局限性），通过“响应式对象 + 副作用函数”实现更精准的依赖追踪。
• React： 不主动监听数据变化，通过状态更新触发重新渲染（如 setState 或 useState 的更新函数）。 数据变化后，React 重新执行组件函数生成新虚拟 DOM，通过 Diff 算法对比新旧虚拟 DOM 差异，最终更新真实 DOM。

3. 虚拟 DOM 与渲染逻辑

• Vue：
  • 模板编译为渲染函数生成虚拟 DOM，编译阶段会进行静态节点提升（标记不变节点，避免重复 Diff）、事件缓存等优化，减少运行时计算。
  • 依赖收集机制让 Vue 精准定位“依赖变化数据的组件”，仅更新受影响组件，无需全量 Diff（3.x 通过“区块树”进一步缩小 Diff 范围）。
• React：
  • 组件函数直接返回 JSX 编译后的虚拟 DOM，默认情况下父组件状态变化会触发所有子组件重新渲染（即使子组件未使用变化状态），需通过手动优化（memo、useMemo）控制渲染范围。
  • Diff 算法采用“同层节点对比 + key 识别稳定节点”策略（时间复杂度 O(n)），默认全量对比当前组件的虚拟 DOM 树。

二、性能差异

性能差异核心体现在渲染触发精准性和更新成本，具体对比如下：

对比维度	Vue 特点	React 特点
更新触发机制	响应式依赖收集，精准更新受影响组件	状态更新触发重渲染，默认更新范围可能更大
虚拟 DOM 成本	编译时静态优化（静态节点提升、PatchFlag），运行时 Diff 高效	依赖运行时 Diff，缺乏编译时优化，复杂组件树计算成本较高
内存占用	2.x 因 getter/setter 内存开销略高；3.x Proxy 优化后改善	无响应式数据内存开销，但频繁状态更新可能导致虚拟 DOM 频繁重建

三、框架优化方向

（一）Vue 优化技巧

1. 响应式数据优化：
   • 非静态数据不放入 data，减少依赖收集开销；
   • 大数组/对象用 Object.freeze 冻结非响应式数据（Vue 3 可直接使用非响应式变量）；
   • 纯静态内容用 v-once 标记，避免重复渲染。
2. 模板与渲染优化：
   • 拆分大型组件为小型组件，缩小单个组件 Diff 范围；
   • 用 v-memo 缓存组件/元素，指定依赖项（类似 React.memo）；
   • 模板中避免复杂表达式/函数调用，改用 computed 预处理。
3. 列表与 DOM 优化：
   • 遍历列表指定唯一 key（避免用索引），帮助 Vue 精准复用节点；
   • 长列表使用虚拟滚动（如 vue-virtual-scroller），仅渲染可视区域节点；
   • 频繁切换元素用 v-show 替代 v-if，减少 DOM 销毁/重建成本。
4. Vue 3+ 专属优化：
   • 用 <script setup> 减少模板与逻辑通信成本，提升编译效率；
   • 利用编译时优化特性（如 PatchFlag），让 Diff 仅关注动态节点。

（二）React 优化技巧

1. 减少不必要的渲染：
   • 用 React.memo 包装组件，缓存渲染结果（仅 props 浅比较变化时重渲染）；
   • 配合 useMemo 缓存昂贵计算结果，useCallback 缓存函数（避免因引用变化导致 React.memo 失效）。
2. 状态管理优化：
   • 拆分状态粒度，避免不相关状态放在同一 useState/useReducer 中；
   • 全局 Context 拆分多个小 Context，或结合 useMemo 局部缓存，减少 Context 变化带来的全量重渲染。
3. 虚拟 DOM 优化：
   • 列表遍历指定唯一 key，帮助 React 识别稳定节点；
   • 渲染函数中避免创建匿名函数/对象（如 <button onClick={() => {}}>），防止每次渲染生成新引用。
4. 大型应用优化：
   • 代码分割：用 React.lazy + Suspense 按需加载组件，减少初始加载时间；
   • 长列表虚拟滚动（如 react-window），降低渲染压力；
   • 延迟非紧急更新：用 useDeferredValue 或 useTransition，避免阻塞用户交互。

四、核心异同点

（一）相同点

1. 均提倡组件化开发，支持组件复用与组合；
2. 均实现数据驱动视图，通过状态管理控制 UI 渲染；
3. 均使用虚拟 DOM + Diff 算法优化 DOM 更新，提升渲染效率；
4. 均有配套生态：路由库（Vue Router/React Router）、状态管理（Vuex/Pinia/Redux）；
5. 最终均通过渲染函数生成 VNode（虚拟节点），再映射为真实 DOM。

（二）关键不同点

对比维度	Vue	React
开发范式	模板语法（HTML 为核心）+ 选项式 API/组合式 API	JSX（JS 为核心）+ 函数式 API
数据响应式	自动监听数据变化（Proxy/Object.defineProperty）	手动触发状态更新（setState/useState）
Diff 策略	精准更新（依赖收集），无需全量 Diff	自顶向下全量 Diff（需手动优化渲染范围）
生态特点	开箱即用，约定大于配置，学习成本低	灵活性高，可定制化强，适合复杂场景扩展
样式方案	支持 Scoped CSS、CSS Modules、预处理器	推荐 CSS-in-JS（如 styled-components）、CSS Modules

五、场景选择建议

优先选择 Vue 的场景

1. 中小型应用、快速迭代项目（Vue 易用性强，开发效率高，心智负担小）；
2. 传统前端开发者转型（模板语法贴近 HTML，学习曲线平缓）；
3. 需求明确、无需高度定制化的业务（如官网、管理后台、移动端 H5）；
4. 团队追求“开箱即用”，希望框架提供更多内置优化（减少手动配置成本）。

优先选择 React 的场景

1. 大型复杂应用、中后台系统（组件化灵活性高，适合项目长期维护与扩展）；
2. 团队熟悉函数式编程思想，追求“一切皆 JS”的统一开发范式；
3. 需跨端开发（React Native 生态成熟，可复用 React 组件开发移动端 App）；
4. 项目需要高度定制化（如自定义渲染逻辑、复杂状态管理场景）。

参考资料

参考：当面试官让我回答 React 和 Vue 框架的区别...... - 掘金

贡献者

jiechen

chenjie

页面历史

最后编辑于 4 天前

查看完整历史

8a24370-fix: 修复打包问题

baf08bc-feat: 增加react相关

645939d-refactor: bump version

4852296-style: use the Obsidian Lint plugin to unify the style

1bb046d-chore: remove useless files

c69a0b7-chore: organize file directories