Vue 3 Composition API 中如何正确添加表单项副本到数组

        在 Vue 3 中，使用 Composition API 时，如果你尝试直接通过引用（如 formState）来填充 formList 数组，你会遇到一个问题：所有通过 addForm 方法添加的表单项实际上都是对 formState 的同一个引用。这意呀着，如果你修改了任何一个表单项，所有其他通过 formState 添加的表单项也会同时被修改，因为它们实际上都是指向同一个对象。

        为了解决这个问题，你需要在每次调用 addForm 方法时创建一个 formState 的新副本。这可以通过展开操作符（...）或者使用 Object.assign() 来实现。以下是两种方法的示例：

方法 1: 使用展开操作符

import { reactive, ref } from 'vue';  
  
const formState = reactive({  
  studentId: undefined,  
  coachId: undefined,  
  contractId: undefined,  
  startDate: '',  
  startTime: '',  
  endDate: '',  
  endTime: '',  
  memo: '',  
});  
  
const formList = ref([]);  
  
const addForm = () => {  
  // 创建一个 formState 的新副本并添加到 formList 中  
  formList.value.push({ ...formState });  
};

方法 2: 使用 Object.assign()

注意，Object.assign() 会返回目标对象（即新对象），但需要注意的是，如果 formState 中的属性值是对象或数组等引用类型，则这些嵌套对象或数组不会被深拷贝，而只是浅拷贝。对于基本数据类型（如数字、字符串、布尔值等），这种方法是足够的。

const addForm = () => {  
  // 创建一个 formState 的新副本（浅拷贝）并添加到 formList 中  
  formList.value.push(Object.assign({}, formState));  
};

完整示例

        这里是一个完整的示例，展示了如何在 Vue 3 组件中使用上述方法：

<template>  
  <div>  
    <button @click="addForm">Add Form</button>  
    <div v-for="(form, index) in formList" :key="index">  
      <!-- 渲染表单内容 -->  
      <p>Student ID: {{ form.studentId }}</p>  
      <!-- 其他表单字段... -->  
      <button @click="removeForm(index)">Remove</button>  
    </div>  
  </div>  
</template>  
  
<script>  
import { reactive, ref } from 'vue';  
  
export default {  
  setup() {  
    const formState = reactive({  
      studentId: undefined,  
      // 其他字段...  
    });  
  
    const formList = ref([]);  
  
    const addForm = () => {  
      formList.value.push({ ...formState });  
    };  
  
    const removeForm = (index) => {  
      formList.value.splice(index, 1);  
    };  
  
    return { formList, addForm, removeForm };  
  },  
};  
</script>

在这个示例中，每次点击“Add Form”按钮时，都会通过 addForm 方法在 formList 中添加一个formState的新副本。这样，每个表单项都是独立的，修改一个表单项不会影响其他表单项。