Vue3 → React comparison study table (must know the core)

1. Core mental model comparison (the most important ⭐⭐⭐)

Dimensions	Vue 3	React 18
Frame Positioning	Progressive Framework	UI Library
Core idea	Reactive dependency collection	State-driven re-execution
update trigger	setter → trigger	setState → rerender
Compiler	Strong (SFC + templates)	Weak (JSX straight out)
diff granularity	static boost / PatchFlags	Fiber + Scheduler
Recommended paradigm	Declarative templates	Functions are UI
Design philosophy	Minimize rerenders	Rerenders are the norm

Key changes:

• Vue: "If the data changes, whoever uses it will update it"
• React: "The state has changed, and the component function is re-run"

2. Responsive system vs Hooks (⭐⭐⭐)

1️⃣ state

Vue3	React
ref()	useState()
reactive()	useState(object)
.value	direct variable

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

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

⚠️ React state is immutable thinking

// ❌ 错误
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])

🧠 Essential differences:

• Vue: automatic dependency collection
• React: manual dependency array

3️⃣ watch / watchEffect

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

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

⚠️ React’s useEffect = life cycle + side effects

• Not watch
• No guarantee of synchronization

3. Life cycle comparison (⭐⭐)

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

4. Component communication (⭐⭐⭐)

1️⃣ father → son

Vue	React
props	props

<Child count={count} />

2️⃣ son → father

Vue	React
$emit	props callback

<Child onChange={setCount} />

3️⃣ slots vs children

Vue	React
<slot />	{props.children}
named slot	render props

5. v-if / v-for / command comparison (⭐⭐)

Vue Directives	React
v-if	condition && <Comp />
v-for	array.map()
v-model	Controlled components
v-bind	{...props}
v-on	onClick

6. Template vs JSX (core thinking difference ⭐⭐⭐)

Vue

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

React

<div>{count}</div>

🧠 React JSX essence:

JS expression + function call

7. ref & DOM operations (⭐⭐)

Vue3	React
ref="el"	useRef()

const el = useRef(null)

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

8. Status management comparison (⭐⭐)

Vue	React
Pinia	Redux Toolkit
provide/inject	Context
Vuex	Redux (old)

9. Performance optimization ideas (⭐⭐⭐)

Vue3	React
Automatic dependency tracking	Manual memo
v-memo	memo()
Static promotion	useMemo / useCallback

10. Where you need to be “counter-intuitive” (must read ⚠️)

❗ In React:

1. rerender is not equal to DOM update
2. The function will be re-executed every time
3. Closures are a performance & bug source
4. The dependent array must be written in full