[!info] related notes

• 所属 MOC: Vue MOC, React MOC
• 前置概念: Vue3 Proxy 响应式原理, React useState 内部原理
• 并列概念: Vue vs React 依赖收集对比, Vue vs React 触发更新对比
• 关系笔记: React 状态模型 vs Vue3 响应式模型

Vue vs React 状态模型核心差异

主题范围

本篇聚焦 Vue 和 React 在”状态是什么、怎么变”这个最本质问题上的差异。

一句话定义

• Vue 状态：可追踪的响应式对象，改了就知道谁依赖
• React 状态：渲染快照，改了要提交，提交后才有新快照

Vue：响应式状态

本质

状态是一个响应式对象，框架在运行时拦截读写操作：

const state = reactive({ count: 0 })

state.count++ // 直接修改，Proxy 拦截

特点

• 直接修改：state.count = 1 即可触发更新
• 自动追踪：谁读了 state.count，Vue 都知道
• 无需不可变：可以直接 state.list.push(item)

React：状态快照

本质

状态是当前渲染的快照，修改需要”提交”：

const [count, setCount] = useState(0)

setCount(1) // 提交更新，不是直接修改
console.log(count) // 仍然是旧值

特点

• 提交机制：通过 setState 提交更新请求
• 快照模型：当前渲染里 state 是固定值
• 不可变更新：必须 { ...state, count: 1 }

直观对比

场景	Vue	React
定义状态	const state = reactive({})	const [state, setState] = useState({})
修改状态	state.count = 1	setCount(prev => ({ ...prev, count: 1 }))
读取同步变化	立刻读到新值	需等下次渲染
数组操作	arr.push(item)	setArr([...arr, item])

最短记忆方式

• Vue：状态 = 响应式对象，改了自动更新
• React：状态 = 渲染快照，改了提交更新

Related notes

• React MOC