Vue3响应式陷阱之对象引用丢失导致的数据更新失效的解决方法

<script setup lang="ts">
import { ref, watch } from 'vue';

interface FormField {
  id: string;
  name: string;
  type: string;
  category?: string; // 字段分类
}

interface Props {
  fields: FormField[];
  formType: 'basic' | 'advanced';
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'update:fields', value: FormField[]): void;
}>();

const localFields = ref<FormField[]>([...props.fields]);

// 初始化字段分类
const initializeCategory = (field: FormField) => {
  if (field.category) return; // 已有值则跳过
  
  // 根据字段类型自动设置分类
  const categoryMap = {
    'text': '文本类',
    'number': '数值类',
    'date': '日期类',
  };
  
  field.category = categoryMap[field.type] || '其他';
  console.log('赋值后 field.category:', field.category); // ✅ 打印正常
};

// 字段变化处理
const handleFieldChange = async (index: number, type: string) => {
  const field = localFields.value[index];
  field.type = type;
  
  // 初始化分类
  initializeCategory(field);
  
  // 通知父组件
  emit('update:fields', [...localFields.value]);
};

// 监听 props 变化
watch(
  () => props.fields,
  (newVal) => {
    if (props.formType === 'basic') {
      // 基础表单：直接浅拷贝
      localFields.value = [...newVal];
    } else {
      // 高级表单：需要添加额外的默认值
      const processedFields = newVal.map((item) => ({
        ...item,
        advanced: true, // 添加高级表单标记
      }));
      localFields.value = [...processedFields];
    }
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <div v-for="(field, index) in localFields" :key="field.id">
    <select @change="(e) => handleFieldChange(index, e.target.value)">
      <option value="text">文本</option>
      <option value="number">数值</option>
      <option value="date">日期</option>
    </select>
    <span>分类: {{ field.category || '未设置' }}</span>
  </div>
</template>

const initializeCategory = (field: FormField) => {
  console.log('赋值前 field:', field);
  console.log('赋值前 field.category:', field.category);
  
  field.category = categoryMap[field.type] || '其他';
  
  console.log('赋值后 field.category:', field.category); // ✅ 有值
  console.log('赋值后 field:', field); // ✅ 有值
  console.log('localFields.value:', localFields.value); // ❌ 对应项没有 category！
};

1. handleFieldChange 被调用
2. 修改 field.type
3. 调用 initializeCategory(field) ✅ 成功赋值
4. emit('update:fields', [...localFields.value])
5. 父组件接收到更新，修改 props.fields
6. watch 监听到 props.fields 变化
7. 对于高级表单，执行 map 创建新对象 ⚠️
8. localFields.value 被替换成新对象数组 ❌
9. 之前在 initializeCategory 中的修改丢失！

// 高级表单分支
const processedFields = newVal.map((item) => ({
  ...item,  // ⚠️ 展开运算符创建了全新对象！
  advanced: true,
}));
localFields.value = [...processedFields];

// 基础表单分支
localFields.value = [...newVal];  // 浅拷贝数组，但对象引用不变

newVal.map((item) => ({ ...item, advanced: true }))

基础表单（正常）:
  field (引用A) ──修改──> field.category = '文本类'
                          ↓
  emit ──> props.fields 更新
                          ↓
  watch ──> [...newVal] ──> localFields.value = [引用A, ...]
                          ↓
  页面渲染 ✅ 显示 '文本类'


高级表单（异常）:
  field (引用A) ──修改──> field.category = '文本类'
                          ↓
  emit ──> props.fields 更新
                          ↓
  watch ──> map 创建新对象 ──> localFields.value = [引用B, ...]
                          ↓
  引用A 的修改丢失！
                          ↓
  页面渲染 ❌ 显示 '未设置'

// 修改前
const initializeCategory = (field: FormField) => {
  field.category = categoryMap[field.type] || '其他';
};

// 修改后
const initializeCategory = (fieldId: string) => {
  const field = localFields.value.find(f => f.id === fieldId);
  if (!field || field.category) return;
  
  const categoryMap = {
    'text': '文本类',
    'number': '数值类',
    'date': '日期类',
  };
  
  field.category = categoryMap[field.type] || '其他';
};

// 调用时
const handleFieldChange = async (index: number, type: string) => {
  const field = localFields.value[index];
  field.type = type;
  
  // 传 ID 而不是对象
  initializeCategory(field.id);
  
  emit('update:fields', [...localFields.value]);
};