Vue3 & React 对比 + 前端避坑指南正文学完 Vue 和 React 基础，很多同学会困惑：两者有什么区别

正文

学完 Vue 和 React 基础，很多同学会困惑：两者有什么区别？开发中容易踩哪些坑？这一篇帮你整理清楚，适合收藏、复习。

表格

Vue3：

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

React：

const [count, setCount] = useState(0)
setCount(count + 1)

Vue：

<div v-if="isShow"></div>

React：

{ isShow && <div></div> }

Vue：

<li v-for="item in list" :key="id"></li>

React：

list.map(item => <li key={item.id}></li>)

错误：

if (xxx) {
  useState() // 报错
}

Hooks 必须在组件顶层，不能在 if/for 里。

错误：

const { name } = defineProps(['name'])

正确：

const props = defineProps(['name'])
const name = computed(() => props.name)
// 或 toRefs

Vue reactive 直接赋值有时失效：

state.list = newList // 可能不更新
state.list = [...newList] // 推荐

React 不能直接改原数组：

list.push(xxx) // 不更新
setList([...list, xxx])

Vue：

onMounted(() => {
  timer = setInterval()
})
onUnmounted(() => clearInterval(timer))

React：

useEffect(() => {
  const timer = setInterval()
  return () => clearInterval(timer)
}, [])

Vue 中 v-for 优先级更高，会造成性能浪费。正确做法：在外层套 template。

无论 Vue 还是 React，长列表一定要用：

Vue scoped 样式穿透：

:deep(.el-button) { ... }

React 用 global 或 CSS Modules。