数据驱动视图 vue和react对比

一句话总区别

• Vue：自动响应式，数据变了自动更视图
• React：手动触发更新，靠状态不可变驱动重渲染

---

一、核心原理对比

Vue 数据驱动

Vue 是自动依赖追踪的响应式；

1. 通过 Proxy（Vue3）劫持对象的 get / set
2. get 收集依赖（谁用到了这个数据）
3. set 派发更新（通知用到的地方重新渲染）
4. 精确知道哪个组件、哪个地方要更新

React 数据驱动

React 本身没有内置响应式系统，它是基于状态不可变和显式更新实现状态驱动。

1. 没有数据劫持，不监听数据变化
2. 必须调用 setState / useState 更新函数 手动触发更新
3. 靠引用变化判断是否更新（浅比较）
4. 触发后组件重新 render，再用 diff 算 DOM 差异

二、更新粒度对比

Vue

精准更新

• 哪个响应式数据变了，就只更新用到它的组件/节点
• 不需要你手动优化，默认性能就很好

React

组件级更新

• 一旦 setState，整个组件函数重新执行
• 子组件也会跟着重新 render
• 需要手动优化：React.memo / useMemo / useCallback

---

三、写法风格对比

Vue

• 直接修改数据：this.count++ 或 count.value++
• 写法自然、直观
• 不需要关心不可变数据

React

• 必须不可变更新，不能直接改原对象/数组
• 要：setCount(prev => prev + 1)
• 对象/数组要展开：setUser({ ...user, name: 'xx' })

---

四、性能机制对比

Vue

• 依赖收集 = 精准更新
• 渲染开销小，默认性能高
• 大型对象、长列表天然更友好

React

• 组件级重渲染 = 容易不必要渲染
• 复杂页面必须手动优化
• 优化成本比 Vue 高

---

五、一句话总结（面试必背）

• Vue 是自动响应式，精准追踪依赖，数据变自动更视图。
• React 是手动触发更新，基于不可变数据，组件级重渲染。
• Vue 靠劫持 + 依赖收集 ；React 靠状态不可变 + 显式更新。