Vue中如何重置表单至初始数据？

我之前也碰到过一模一样的场景，给你几个实用的解决方案，核心思路就是保存一份独立的初始数据快照，避免引用类型带来的坑：

1. 组件初始化时深拷贝初始数据作为快照 #

当组件创建并获取到后端数据后，立刻对数据做一次深拷贝，存为独立的变量（比如originalData）。这样不管后续表单数据怎么修改，这份快照都不会被影响，取消编辑时直接把快照赋值回表单绑定的变量即可。

举个Vue的示例代码：

export default {
  data() {
    return {
      formData: {},
      originalData: {},
      isEditable: false
    };
  },
  created() {
    // 模拟从后端获取数据
    this.fetchFormData().then(res => {
      this.formData = res.data;
      // 深拷贝保存初始快照，避免引用关联
      this.originalData = JSON.parse(JSON.stringify(res.data));
    });
  },
  methods: {
    fetchFormData() {
      // 实际项目中替换为你的API请求
      return Promise.resolve({ data: { name: "张三", age: 25 } });
    },
    handleEdit() {
      this.isEditable = true;
    },
    handleCancel() {
      // 重置回初始数据
      this.formData = JSON.parse(JSON.stringify(this.originalData));
      this.isEditable = false;
    },
    handleSave() {
      // 这里写保存到DB的逻辑
      console.log("保存数据：", this.formData);
      this.isEditable = false;
    }
  }
};

如果是React项目，思路完全一致：

import { useState, useEffect } from "react";

function UserForm() {
  const [formData, setFormData] = useState({});
  const [originalData, setOriginalData] = useState({});
  const [isEditable, setIsEditable] = useState(false);

  useEffect(() => {
    // 模拟获取后端数据
    const fetchData = async () => {
      const res = await Promise.resolve({ data: { name: "张三", age: 25 } });
      setFormData(res.data);
      setOriginalData(JSON.parse(JSON.stringify(res.data)));
    };
    fetchData();
  }, []);

  const handleEdit = () => setIsEditable(true);
  const handleCancel = () => {
    setFormData(JSON.parse(JSON.stringify(originalData)));
    setIsEditable(false);
  };
  const handleSave = () => {
    console.log("保存到DB：", formData);
    setIsEditable(false);
  };

  return (
    <div>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        disabled={!isEditable}
      />
      <button onClick={isEditable ? handleCancel : handleEdit}>
        {isEditable ? "取消" : "编辑"}
      </button>
      {isEditable && <button onClick={handleSave}>保存</button>}
    </div>
  );
}

2. 进入编辑模式时保存当前快照（更灵活） #

如果你的表单数据在只读状态下可能被其他操作更新（比如页面其他组件修改了数据），那可以把快照的时机从组件初始化改成点击编辑按钮时。这样取消编辑时，会回到点击编辑前的状态，而不是组件刚加载时的初始值，更符合用户预期：

// Vue示例的handleEdit方法修改为：
handleEdit() {
  // 保存当前表单的状态作为快照
  this.tempData = JSON.parse(JSON.stringify(this.formData));
  this.isEditable = true;
},
handleCancel() {
  // 重置到编辑前的状态
  this.formData = this.tempData;
  this.isEditable = false;
}

为什么之前的方案无效？ #

大概率是因为你直接引用了组件创建时的initialData，而如果数据是对象/数组这类引用类型，后续修改formData时会直接修改到initialData的内容（因为它们指向同一个内存地址）。所以必须通过深拷贝创建一份完全独立的快照，才能保证取消时拿到的是真正的初始值。

内容的提问来源于stack exchange，提问作者CircularRecursion