Vue3 重置 Reactive() 定义的表单数据

要重置 'reactive()' 定义的表单数据，你可以使用 'toRefs()' 方法将响应式对象转换为普通对象，然后使用 'Object.assign()' 方法将初始数据结构覆盖到表单数据对象上。

以下是一个示例代码：

import { reactive, toRefs } from 'vue';

const initialFormData = {
  name: '',
  email: '',
  password: '',
};

const formData = reactive({ ...initialFormData });

function resetForm() {
  Object.assign(formData, initialFormData);
}

// 在组件中使用 toRefs() 方法将响应式对象转换为普通对象
const { name, email, password } = toRefs(formData);

在 'resetForm()' 函数中，我们使用 'Object.assign()' 方法将 'initialFormData' 覆盖到 'formData' 对象上，这将使表单数据恢复到初始定义的结构。

注意：使用 'toRefs()' 方法将响应式对象转换为普通对象时，我们需要使用解构语法（'{ name, email, password }'）将转换后的属性解构出来。这是因为 'toRefs()' 方法返回的是一个包含响应式属性的对象，而不是一个普通对象。