Hello World

Appearance

On This Page

面试题[Vue vs React] ​

1. 基础 ​

1.1 核心思想：库 vs 框架 ​

  • React：一个UI库，专注于构建用户界面。它本质上只是MVC 中的 View 层，其他能力（如路由、状态管理）需要从社区挑选第三方库（如 React Router、Redux）。
  • Vue：一个渐进式框架。你可以只把它当 View 层用（核心库），也可以和官方提供的 Vue Router、Pinia 等全家桶整合成完整框架。

1.2 模板语法：JSX vs Template ​

  • React 使用 JSX：JSX 是 JavaScript 的语法扩展，允许你在 JS 中写 HTML 标签。它能力强大（原生 JS 控制流），但逻辑与结构耦合。
  • Vue 使用 Template：基于 HTML 的模板语法，更接近传统 Web 开发（HTML/CSS/JS 分离）。Vue 编译器会在构建时优化模板，指令（v-for, v-if）封装了常见逻辑，更简洁但扩展性依赖指令。

1.3 状态与数据更新 ​

  • React：不可变数据 + setState
    • 你必须用 setState 或 Hook 的 setter（如 setCount）来创建新对象。直接修改 state 不会触发重新渲染。
    • 原因：React 依赖浅比较（object.is）来检测变化，需要新旧地址不同。
  • Vue：可变数据 + 响应式
    • Vue 用 ref/reactive 包装数据，通过 Proxy 代理属性。直接修改 state.count++ 即可，Vue 会自动收集依赖并更新视图。
    • 原因：Vue 在 getter 时收集依赖，在 setter 时通知更新。

1.4 性能优化：手动 vs 自动 ​

  • React：依赖手动优化。默认行为是“当组件状态变化，其整个子树都重新渲染”。你需要用 React.memo、useMemo、useCallback 来跳过不必要的子组件渲染。
  • Vue：大多数情况下无需手动优化。响应式系统自动追踪依赖，只有依赖变化时该组件才重新渲染，粒度最小。

2. 进阶 ​

2.1 如何选择 ​

在实际项目中，选择 Vue 还是 React 往往不是技术优劣的问题，而是匹配度的问题。以下是一套基于团队、项目、生态三个维度的决策框架，可以帮助你做出合理选择。

维度更适合 Vue 的情况更适合 React 的情况
团队技术背景后端/全栈偏多、传统 Web 开发者、Vue 2 经验丰富前端专业团队、习惯函数式编程、大量使用 TypeScript
项目类型快速迭代的管理系统、官网、中小型应用、需要渐进式接入大型长周期应用、复杂交互、需要高度定制能力
生态需求移动端（Weex，但已不活跃）、桌面端（Electron 均可）React Native（跨平台 App）、Remix/Next（全栈）
性能敏感度普通 CRUD 应用（两者持平）超大列表/高频更新，需要精细控制渲染粒度
招聘与社区国内中小企业、外包项目常见大厂、国际化项目、开源生态更活跃
开发体验偏好喜欢模板语法、声明式指令、直接修改数据喜欢 JS 完全控制、推崇不可变性、喜欢写 JSX

2.2 虚拟 DOM 的区别 ​

对比维度ReactVue
核心理念"我'不知道'哪里变了，所以全量比较，然后找出差异""我'知道'哪里变了，所以精准更新，并只做最小化比较"
触发机制数据变化 (setState)，导致组件树自上而下全量重新渲染响应式数据变化，通过 Watcher 精准锁定发生变化的组件
Diff 比较起点从整棵虚拟 DOM 树的根节点开始从发生变化的组件根节点开始
Diff 比较策略同层比较（基于假设优化，优先复用节点），子节点比较采用从左到右的双指针遍历同样是同层比较，但子节点比较采用双端比较（同时从新旧列表两端开始），寻找更优复用方案
列表优化必须依靠 key 来识别元素，否则性能差且可能引发 bug建议使用 key，但不是强制；内部会用最长递增子序列(LIS) 算法找出最小移动量
节点更新策略"同类型则更新，否则销毁重建"：只要元素类型相同，会尽量保留 DOM 节点，只更新变更的属性"更精确"：会区分更多情况，更倾向于销毁并新建节点。例如，同元素但类名不同，Vue 认为不同并会重建
性能表现偏向在复杂的交互和动画逻辑中，其全量 Diff 策略可能更可控在频繁数据更新的场景，其精准触发的机制理论上能带来更高性能
调度机制React 在处理虚拟 DOM 时使用了 Reconciliation 和 Fiber 架构，具有时间分片的特点Vue 主要通过异步队列来批量更新，减少渲染次数

两者虚拟 DOM 的差异，本质上是其底层设计哲学的体现：Vue 通过更精细的依赖收集来减少不必要的计算，倾向于“局部最优”；React 则秉持“简单可预测”的原则，倾向于“整体一致”。没有绝对的优劣，只有更适合特定场景的选择。