一句话总区别
- Vue：自动响应式，数据变了自动更视图
- React：手动触发更新，靠状态不可变驱动重渲染
一、核心原理对比
Vue 数据驱动
Vue 是自动依赖追踪的响应式；
- 通过
Proxy（Vue3）劫持对象的get / set - get 收集依赖（谁用到了这个数据）
- set 派发更新（通知用到的地方重新渲染）
- 精确知道哪个组件、哪个地方要更新
React 数据驱动
React 本身没有内置响应式系统，它是基于状态不可变和显式更新实现状态驱动。
- 没有数据劫持，不监听数据变化
- 必须调用
setState / useState 更新函数手动触发更新 - 靠引用变化判断是否更新（浅比较）
- 触发后组件重新 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 靠状态不可变 + 显式更新。