Vue 3 中“陈旧状态”问题源于子组件异步回调中直接使用闭包捕获的旧响应式值；应改用 ref.current 动态读取最新值、为每次操作创建独立数据上下文、避免直接修改 props、将异步逻辑交由父组件统一控制。
在 Vue 3 中，emit 本身是安全的，问题出在父组件监听 emit 后写的事件处理函数里——尤其是当它包含异步操作（如 setTimeout、Promise.then、axios 回调）时，若直接读取或修改闭包中捕获的旧状态，就会导致数据错乱、覆盖、重置等“陈旧状态”现象。
用 ref.current 动态读取最新响应式值
不要在异步回调里直接使用 form.value 或 item.name 这类在函数定义时就确定的变量。改用 ref 存储对响应式数据的“活引用”，在回调中通过 .current 实时获取：
- 声明
const formRef = ref(form)，并在每次更新form后同步赋值：formRef.value = form - 在
emit的回调中写console.log(formRef.current.name)，确保拿到的是当前最新值 - 适用于
ref和reactive对象（对reactive可封装为const dataRef = shallowRef(data)）
避免共享引用，隔离每次操作的数据上下文
连续打开多个编辑对话框时，如果都复用同一个 form 响应式对象，后一个请求返回后会覆盖前一个结果。解决方式是让每次弹窗拥有独立数据空间：
- 按唯一标识创建独立 ref：
const dialogForms = ref({})，再用dialogForms.value[id] = {...}分开存储 - 在
onBeforeUnmount或关闭时清理对应 key，防止内存堆积 - 或改用工厂函数生成新对象：
const createForm = () => reactive({...})，每次打开都调用一次
不直接修改 props，始终遵守单向数据流
子组件收到的 props.item 是父组件原始数据的引用。若你在子组件里写 props.item.name = 'new'，等于直接改了父组件状态——后续 emit 只是通知，但混乱早已发生：
- 子组件内部一律用
const localItem = ref({ ...props.item })拷贝初始化 - 所有编辑操作只作用于
localItem.value，提交时再emit('update', localItem.value) - 父组件收到后显式更新自身数据，保持流向清晰、可追溯
把异步逻辑交给父组件统一控制节奏
让父组件决定何时发起请求、何时更新状态，子组件只负责触发语义明确的事件（如 'submit'、'cancel'），不携带具体数据处理逻辑：
- 子组件：
emit('submit', { id: 123, payload: localItem.value }) - 父组件监听：
@submit="handleSubmit"，并在handleSubmit中做请求、错误处理、状态更新 - 这样异步副作用完全在父组件作用域内，天然规避子组件闭包陷阱
