Vue 3 表单数据莫名丢失？我在 `watchEffect` 里踩了个响应式的坑

症状表单填写到一半切换 Tab 再切回来部分字段自动清空了。必现但找不到任何reset()调用。背景项目是一个多步骤表单使用 Vue 3 Pinia 管理状态。表单数据存在 store 里组件通过v-model双向绑定。某天测试反馈第二步的备注字段只要切一次 Tab 就会清空。排查过程第一步确认不是组件销毁的问题第一反应是组件被销毁重建导致数据丢失。检查路由配置确认用了keep-alive排除。!-- App.vue -- router-view v-slot{ Component } keep-alive component :isComponent / /keep-alive /router-view组件没有重建数据丢失一定是被某段逻辑主动覆盖了。第二步全局搜索赋值操作搜索formData.remark 只有两处用户输入触发的v-model和 store 初始化时的$reset()。$reset()只在登出时调用也排除。第三步加watch断点定位在 store 里对remark字段加一个深度监听打印调用栈// stores/form.tswatch(()formStore.remark,(val,old){if(valold!){console.trace(remark was cleared!)}})切换 Tab控制台打出了调用栈。栈顶赫然是一个watchEffectwatchEffect (Step2Form.vue:47) - initFormData - onActivated找到了。第四步看问题代码!-- Step2Form.vue问题版本 -- script setup langts import { watchEffect, onActivated } from vue import { useFormStore } from /stores/form const store useFormStore() // 意图当 props.orderId 变化时重新拉取订单数据填充表单 watchEffect(() { if (props.orderId) { store.formData { ...store.formData, remark: , // ← 问题在这里 amount: 0, } fetchOrderDetail(props.orderId) } }) /script问题根因找到了watchEffect会在组件激活onActivated时重新执行因为它依赖的props.orderId在响应式系统中被追踪了。每次从其他 Tab 切回来watchEffect重新运行把remark强制清空。根因分析watchEffect有两个关键行为容易被忽视行为说明立即执行组件挂载时执行一次依赖追踪执行过程中访问的所有响应式数据都会成为依赖keep-alive下重新激活onActivated会触发 effect 重新评估props.orderId是响应式的watchEffect读取了它所以orderId一旦变化包括组件重新激活时 Vue 内部的 effect 刷新这段逻辑就会重跑。而开发者的本意是只在orderId真正改变时才重置表单而不是每次激活都重置。修复方案方案一换用watch精确控制触发时机推荐// ✅ 正确只在 orderId 真的变了才执行watch(()props.orderId,(newId,oldId){if(newIdnewId!oldId){store.formData{...store.formData,remark:,amount:0,}fetchOrderDetail(newId)}})watch只在依赖值变化时触发不会在组件激活时无条件重跑。方案二加 flag 防重入如果业务逻辑复杂、必须用watchEffect可以加一个标志位letisFirstLoadtruewatchEffect((){if(props.orderId){if(!isFirstLoad)return// 只执行一次初始化isFirstLoadfalsestore.formData{...store.formData,remark:,amount:0}fetchOrderDetail(props.orderId)}})onDeactivated((){isFirstLoadtrue// 离开时重置以便下次真正切换 orderId 时生效})方案三区分初始化和用户编辑两种状态更健壮的做法是在 store 里加一个isDirty标记// stores/form.tsconstisDirtyref(false)functionresetForNewOrder(orderId:string){if(isDirty.value)return// 用户已经编辑过不允许覆盖formData.remarkformData.amount0currentOrderId.valueorderId}举一反三watchEffect的常见误用场景// ❌ 危险在 watchEffect 里做有副作用的初始化watchEffect((){tableData.value[]// 每次依赖变化都清空fetchList(filters.value)})// ✅ 安全用 watch只在 filters 变化时才清空watch(filters,(){tableData.value[]fetchList(filters.value)},{deep:true})// ❌ 危险keep-alive 组件里用 watchEffect 做权限校验并跳转watchEffect((){if(!userStore.hasPermission(route.name)){router.push(/403)// 每次激活都可能触发跳转}})// ✅ 安全在 onActivated 里做一次性检查onActivated((){if(!userStore.hasPermission(route.name)){router.push(/403)}})总结watchwatchEffect触发时机依赖值改变时立即执行 依赖变化时keep-alive激活不额外触发会重新 flush适合场景精确响应某个值变化自动收集依赖的副作用坑点需要手动声明依赖容易收集到意料之外的依赖一句话记住涉及表单初始化、数据重置、接口调用的逻辑优先用watch而不是watchEffect。watchEffect适合不需要精确控制时机的纯副作用比如日志、DOM 测量。如果这篇文章帮你解决了问题点个收藏备用下次踩坑时能第一时间找到。