React 转 Vue3 避坑指南：10个思维误区和正确写法

从 React 转来的开发者学 Vue3 最容易踩这10个坑每个坑都附上错误写法和正确解法。前言React 和 Vue3 都是现代前端框架但思维模型差异不小。很多 React 开发者转 Vue3 时习惯性地用 React 思维写 Vue导致各种奇怪的 bug。本文针对最高频的10个误区一一击破。误区一把ref当成 React 的useRef❌ React 思维// React 中 useRef 用来存 DOM 引用不触发渲染 const inputRef useRef(null) const count useRef(0) // 存普通值不触发渲染Vue3 的正确理解script setup import { ref, useTemplateRef } from vue // Vue 的 ref响应式数据改变时触发重新渲染 const count ref(0) count.value // 触发更新 // Vue 的 DOM 引用useTemplateRefVue 3.5或 ref 模板名 const inputEl useTemplateRef(myInput) // 对应模板中 refmyInput // 等价于const inputEl ref(null)模板中 input refinputEl /script关键区别Vue 的ref React 的useState响应式不是useRef误区二用watch替代所有副作用❌ 错误写法照抄 React useEffectscript setup // React 开发者习惯用 watch 监听依赖 watch([userId, pageSize], async () { data.value await fetchData(userId.value, pageSize.value) }) /script✅ 正确写法用watchEffect或computedscript setup import { watchEffect, computed } from vue // watchEffect自动追踪内部使用的响应式数据 watchEffect(async () { // 自动追踪 userId 和 pageSize data.value await fetchData(userId.value, pageSize.value) }) // 更好的方案纯计算用 computed const filteredList computed(() { return list.value.filter(item item.status activeStatus.value) }) /script规则能用computed就用computed不行再用watchEffect最后才是watch误区三忘记.value❌ 错误script setup const count ref(0) // 忘记 .value count // ❌ 不生效 if (count 5) {} // ❌ 永远是 true对象 5 /script✅ 正确script setup const count ref(0) count.value // ✅ if (count.value 5) {} // ✅ // 模板中不需要 .value自动解包 /script template span{{ count }}/span !-- 不需要 .value -- /template记忆技巧.value只在script里需要模板中自动解包误区四reactive 的陷阱❌ 解构会失去响应性script setup import { reactive } from vue const state reactive({ count: 0, name: Vue }) // 解构赋值后失去响应性 const { count, name } state // ❌ count // 不会触发更新 /script✅ 解决方案script setup import { reactive, toRefs } from vue const state reactive({ count: 0, name: Vue }) // 方案一toRefs 保持响应性 const { count, name } toRefs(state) count.value // ✅ 有效 // 方案二直接用 state.xxx state.count // ✅ 有效 // 方案三推荐统一用 ref避免 reactive 的坑 const count ref(0) const name ref(Vue) /script误区五组件通信方式混淆React 思维props callback// React通过 callback prop 子传父 Child onUpdate{(val) setData(val)} /Vue3 的方式!-- Vue3通过 emit 事件子传父 -- !-- 父组件 -- Child updatehandleUpdate / !-- 子组件 -- script setup const emit defineEmits{ update: [value: string] }() // 触发事件 emit(update, newValue) /scriptVue3 的三种通信方式父→子props子→父emit跨层级provide/inject或 Pinia误区六滥用 Pinia相当于 Redux❌ 什么都往 Pinia 放React Redux 思维// 错误本地状态也放 Pinia const useButtonStore defineStore(button, { state: () ({ isLoading: false }), })✅ 正确的状态管理原则script setup // 组件内部状态用 ref/reactive const isLoading ref(false) const formData reactive({ name: , email: }) // 跨组件共享状态用 Pinia // 用户信息、购物车、全局配置等 const userStore useUserStore() /script判断标准只有一个组件用的状态放组件里。多个组件共享的放 Pinia。误区七条件渲染写法React 写法// React 三元表达式 {isLoggedIn ? UserPanel / : LoginForm /} {list.length 0 List data{list} /}Vue3 写法template !-- v-if / v-else推荐语义更清晰-- UserPanel v-ifisLoggedIn / LoginForm v-else / !-- 条件显示 -- List v-iflist.length 0 :datalist / !-- v-show只控制 CSS display不销毁 DOM -- Sidebar v-showisSidebarOpen / /templatev-if vs v-showv-ifDOM 会真正创建/销毁适合切换不频繁v-show只改display适合频繁切换误区八列表渲染的 keytemplate !-- ❌ 用 index 做 key和 React 同样的坑-- div v-for(item, index) in list :keyindex !-- ✅ 用唯一 ID -- div v-foritem in list :keyitem.id !-- Vue 特有v-for 和 v-if 不能同级React 无此限制-- !-- ❌ 错误v-for 优先级高于 v-if -- div v-foritem in list v-ifitem.active :keyitem.id !-- ✅ 正确用 computed 过滤或用 template 包一层 -- template v-foritem in list :keyitem.id div v-ifitem.active{{ item.name }}/div /template /template误区九生命周期对应关系React HookVue3 等价说明useEffect(() {}, [])onMounted组件挂载后useEffect(() { return cleanup })onUnmounted组件卸载时清理useEffect(() {}, [dep])watch(dep, handler)依赖变化时useMemocomputed计算属性useCallback不需要Vue 模板不会无谓重渲染useContextinject接收祖先提供的数据script setup import { onMounted, onUnmounted, onUpdated } from vue onMounted(() { console.log(组件已挂载可以操作 DOM) // 等同于 React 的 useEffect(() {}, []) }) onUnmounted(() { // 清理定时器、取消订阅等 clearInterval(timer) }) /script误区十忽视 Vue3 独有优势很多转过来的 React 开发者只是用 Vue 写 React没有利用 Vue3 的独特优势script setup // 1. 双向绑定React 没有 const inputValue ref() // input v-modelinputValue / 就够了不用 onChange handler // 2. 自动解包模板中不需要 .value // 3. Transition 组件内置动画React 需要第三方库 /script template !-- 内置过渡动画React 需要 Framer Motion 等 -- Transition namefade div v-ifshow我会渐入渐出/div /Transition !-- KeepAlive缓存组件状态React 实现很麻烦 -- KeepAlive component :iscurrentTab / /KeepAlive /template style scoped .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter-from, .fade-leave-to { opacity: 0; } /style总结React 转 Vue3 的核心思维转变ReactVue3useStateref/reactiveuseEffectwatch/watchEffect/ 生命周期钩子useMemocomputeduseCallback不需要useContextinjectProps callbackemit事件Redux/ZustandPinia最重要的一条Vue3 有自己的最佳实践不要用 React 思维强行套。遇到感觉绕的写法先想想 Vue 有没有更简单的方式。这篇文章对你有帮助吗点个赞 让更多 React 转 Vue 的同学看到 有其他踩坑经验欢迎评论区分享