vue 编辑表单时判断表单数据是否更改

你可以在 Vue 组件中，为表单数据绑定一个监听器，用于监听表单数据的变化。当表单数据发生变化时，监听器就会触发，你可以在该监听器中编写相应的逻辑来判断表单数据是否更改。比如，你可以定义一个名为 `isFormChanged` 的计算属性，用于判断表单数据是否更改，示例代码如下：

export default {
  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        age: '',
        gender: ''
      },
      // 表单数据原始副本
      formOriginalData: {}
    }
  },
  computed: {
    // 判断表单数据是否更改
    isFormChanged() {
      return JSON.stringify(this.formData) !== JSON.stringify(this.formOriginalData)
    }
  },
  methods: {
    // 保存表单数据
    saveFormData() {
      // TODO：保存表单数据
      // 更新表单数据原始副本
      this.formOriginalData = JSON.parse(JSON.stringify(this.formData))
    }
  },
  mounted() {
    // 初始化表单数据原始副本
    this.formOriginalData = JSON.parse(JSON.stringify(this.formData))
  }
}

在上述代码中，我们定义了一个名为 `formOriginalData` 的变量，用于存储表单数据的原始副本，然后利用计算属性 `isFormChanged` 判断表单数据是否更改。在组件挂载时，我们将表单数据的原始副本保存到 `formOriginalData` 中。当表单数据发生变化时，我们可以调用 `saveFormData()` 方法保存表单数据，并更新表单数据的原始副本。这样，我们就可以方便地判断表单数据是否更改了。