Vue3 → React 对照学习表（核心必会）

一、核心心智模型对照（最重要 ⭐⭐⭐）

维度	Vue 3	React 18
框架定位	渐进式框架	UI Library
核心思想	响应式依赖收集	状态驱动重新执行
更新触发	setter → trigger	setState → rerender
编译器	强（SFC + 模板）	弱（JSX 直出）
diff 粒度	静态提升 / PatchFlags	Fiber + Scheduler
推荐范式	声明式模板	函数即 UI
设计哲学	尽量少 rerender	rerender 是常态

关键转变：

• Vue：“数据变了，谁用谁更新”
• React：“状态变了，组件函数重跑”

二、响应式系统 vs Hooks（⭐⭐⭐）

1️⃣ state

Vue3	React
ref()	useState()
reactive()	useState(object)
.value	直接变量

// Vue
const count = ref(0)
count.value++

// React
const [count, setCount] = useState(0)
setCount(c => c + 1)

⚠️ React 状态是 immutable 思维

// ❌ 错误
state.count++

// ✅ 正确
setState(prev => ({ ...prev, count: prev.count + 1 }))

2️⃣ computed

Vue3	React
computed()	useMemo()

// Vue
const total = computed(() => a.value + b.value)

// React
const total = useMemo(() => a + b, [a, b])

🧠 本质差异：

• Vue：自动依赖收集
• React：手动依赖数组

3️⃣ watch / watchEffect

Vue3	React
watch()	useEffect()
watchEffect()	useEffect()

useEffect(() => {
  console.log(count)
}, [count])

⚠️ React 的 useEffect = 生命周期 + 副作用

• 不是 watch
• 不保证同步

三、生命周期对照（⭐⭐）

Vue3	React
onMounted	useEffect(() => {}, [])
onUpdated	useEffect(() => {})
onUnmounted	return cleanup
nextTick	useLayoutEffect / flushSync

四、组件通信（⭐⭐⭐）

1️⃣ 父 → 子

Vue	React
props	props

<Child count={count} />

2️⃣ 子 → 父

Vue	React
$emit	props callback

<Child onChange={setCount} />

3️⃣ 插槽 vs children

Vue	React
<slot />	{props.children}
具名插槽	render props

五、v-if / v-for / 指令对照（⭐⭐）

Vue 指令	React
v-if	condition && <Comp />
v-for	array.map()
v-model	受控组件
v-bind	{...props}
v-on	onClick

六、模板 vs JSX（核心思维差异 ⭐⭐⭐）

Vue

<div>{{ count }}</div>

React

<div>{count}</div>

🧠 React JSX 本质：

JS 表达式 + 函数调用

七、ref & DOM 操作（⭐⭐）

Vue3	React
ref="el"	useRef()

const el = useRef(null)

useEffect(() => {
  el.current.focus()
}, [])

八、状态管理对照（⭐⭐）

Vue	React
Pinia	Redux Toolkit
provide/inject	Context
Vuex	Redux（老）

九、性能优化思路（⭐⭐⭐）

Vue3	React
自动依赖追踪	手动 memo
v-memo	memo()
静态提升	useMemo / useCallback

十、你需要“反直觉”的地方（必看 ⚠️）

❗ React 中：

1. rerender 不等于 DOM 更新
2. 函数每次都会重新执行
3. 闭包是性能 & bug 根源
4. 依赖数组必须写全