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.memouseMemouseCallback
4. 调和（Reconciliation）
React 把“对比虚拟 DOM + 更新真实 DOM”的过程叫调和。
三、最核心区别
| Vue | React | |
|---|---|---|
| 怎么知道数据变了 | 数据劫持，自动监听 | 手动 setState，不监听 |
| 更新粒度 | 精确到数据/节点 | 组件级别重渲染 |
| 默认性能 | 好，自带优化 | 一般，需手动优化 |
| 虚拟 DOM | 优化手段 | 核心机制 |
| 更新触发 | 被动（数据变就更） | 主动（调用 setState） |
一句话：
Vue 是“我知道你哪里变了，我只更那里”
React 是“你告诉我变了，我整棵树对比一遍再更”
四、超简记忆版（背这个就行）
- Vue：响应式劫持 + 依赖收集 + 细粒度精准更新
- React：状态驱动 + 虚拟 DOM Diff + 组件级重渲染