Vue 和 React 的核心渲染机制 对比

我用前端面试标准答案 + 大白话给你讲清楚，保证你一听就懂、一说就会。

Vue 和 React 的核心渲染机制一句话总结

• Vue：响应式劫持 → 精确追踪变化 → 细粒度更新
• React：状态更新 → 触发重渲染 → 虚拟 DOM 对比 → 最小化更新

---

一、Vue 渲染机制（2/3 通用，核心思想一致）

1. 数据响应式（核心）

• Vue2：用 Object.defineProperty 劫持对象的 get/set
• Vue3：用 Proxy 代理整个对象
• 只要数据一变，Vue 立刻知道是哪个属性变了

2. 依赖收集

模板里用到了哪个数据，Vue 就把它记录下来，建立依赖关系：

• 模板 → 组件 → 数据
• 谁用了谁负责更新

3. 精确更新（细粒度更新）

某个数据变了 → 只更新用到这个数据的地方

→ 组件不会随便全量重渲染，性能天生友好

4. 虚拟 DOM 只是优化手段

Vue 并不是必须用虚拟 DOM，它是为了跨平台、批量更新才用的。

---

二、React 渲染机制

1. 状态不可变（Immutable 思想）

React 不监听数据，只认 state/props 有没有被设置

• setCount() → 状态变了 → 组件触发重渲染
• 不劫持、不监听，靠主动触发更新

2. 虚拟 DOM（核心 Diff）

• 组件重渲染 → 生成新的虚拟 DOM 树
• React Diff 算法对比新旧树
• 找出最小差异，只更新真实 DOM 变化的部分

3. 全量重渲染（默认行为）

父组件更新 → 默认所有子组件跟着重渲染

需要手动优化：

• React.memo
• useMemo
• useCallback

4. 调和（Reconciliation）

React 把"对比虚拟 DOM + 更新真实 DOM"的过程叫调和。

---

三、最核心区别

	Vue	React
怎么知道数据变了	数据劫持，自动监听	手动 setState，不监听
更新粒度	精确到数据/节点	组件级别重渲染
默认性能	好，自带优化	一般，需手动优化
虚拟 DOM	优化手段	核心机制
更新触发	被动（数据变就更）	主动（调用 setState）

一句话：
Vue 是"我知道你哪里变了，我只更那里"
React 是"你告诉我变了，我整棵树对比一遍再更"

---

四、超简记忆版（背这个就行）

• Vue：响应式劫持 + 依赖收集 + 细粒度精准更新
• React：状态驱动 + 虚拟 DOM Diff + 组件级重渲染