组件数据在更新后丢失

现象

Vue 组件中通过 props 或函数传入的对象数据，在某个状态切换后突然变为 undefined 或初始值。典型表现：

• dialog 组件中的表单数据在切换某个开关后清空
• 需要关闭弹窗再重新打开才能恢复数据
• 子组件中的实体数据直接丢失

原因

原因 1：引用传递被替换（最常见）

父组件通过函数将对象传入子组件，但后续操作中原始对象被替换为新引用，子组件持有的仍是旧引用。

<!-- 问题代码 -->
<template>
  <TemplateDialog :data="getTemplateData()" />
</template>

<script setup>
const template = ref({ name: '模板A', content: '...' });

function getTemplateData() {
  // 每次状态变化都返回新对象，不是响应式的
  return { ...template.value };
}
</script>

原因 2：v-if 导致组件销毁重建

<!-- 状态切换时组件被销毁，内部状态丢失 -->
<TemplateDialog v-if="showTemplate" :data="template" />
<!-- 改用 v-show 保持组件存活 -->
<TemplateDialog v-show="showTemplate" :data="template" />

原因 3：key 变化导致组件重建

<!-- key 变化会强制销毁并重建组件 -->
<Component :key="someChangingValue" :data="data" />

原因 4：reactive 对象被整体替换

const state = reactive({ user: { name: '张三' } });

// 错误：整体替换丢失响应性
state = { user: { name: '李四' } };

// 正确：修改属性保持响应性
state.user.name = '李四';

排查

1. DevTools 检查响应性

<script setup>
// 在 setup 中添加 watch 调试
watch(
  () => props.data,
  (newVal, oldVal) => {
    console.log('data 变化:', { old: oldVal, new: newVal });
  },
  { deep: true }
);
</script>

2. 检查引用是否一致

// 对比前后引用
console.log('同一引用?', oldRef === newRef);

3. 检查组件生命周期

<script setup>
onMounted(() => console.log('挂载'));
onUnmounted(() => console.log('销毁'));  // 如果意外触发，说明组件被重建了
onUpdated(() => console.log('更新'));
</script>

解决

方案 1：直接使用 store 中的响应式数据（推荐）

<script setup>
import { useTemplateStore } from '@/stores/template';

const store = useTemplateStore();

// 非表单场景：直接使用 store 数据，自动响应式更新
const template = computed(() => store.currentTemplate);
</script>

方案 2：使用 v-model 双向绑定

<template>
  <TemplateDialog v-model:visible="showDialog" v-model:form="formData" />
</template>

方案 3：使用 shallowRef 避免深层替换

import { shallowRef } from 'vue';

const template = shallowRef({ name: '模板A' });

// 更新时使用 triggerRef 强制触发更新
template.value = { name: '模板B' };
triggerRef(template);

方案 4：使用 toRef 保持引用绑定

<script setup>
import { toRef } from 'vue';

// 保持对父组件属性的引用绑定
const name = toRef(props.data, 'name');
</script>

实战经验

• dialog 组件中展示数据时，优先用 computed 从 store 取，避免 props 传递断链
• 需要编辑的表单数据，用 cloneDeep 拷贝一份独立副本，编辑完再提交
• 关闭弹窗时不要立即清空数据，等关闭动画结束再清空（setTimeout 或 @after-leave）

经验总结

场景	推荐方案
展示型组件	computed 直接引用 store
表单编辑组件	cloneDeep 创建独立副本
弹窗/抽屉	v-show + 延迟清空
列表 key	使用稳定 ID，避免用 index

Related notes

• Vue MOC
• React MOC
• Element Plus MOC
• Element Plus