vue中表单修改提交前利用watch找出新数据和原来数据之间的改动

<template>  
  <div>  
    <form @submit.prevent="submitForm">  
      <input v-model="formData.name" type="text" placeholder="Name">  
      <input v-model="formData.email" type="email" placeholder="Email">  
      <button type="submit">Submit</button>  
    </form>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formData: {  
        name: '',  
        email: '',  
      },  
      originalData: {  
        name: '',  
        email: '',  
      }  
    }  
  },  
  watch: {  
    formData: {  
      handler(newVal, oldVal) {  
        // 对比新旧值找出改动部分  
        this.findChanges(newVal, oldVal);  
      },  
      deep: true, // 设置为deep，以便于监听对象内部数据的变动  
    }  
  },  
  methods: {  
    submitForm() {  
      // 提交表单前进行数据对比  
      this.findChanges(this.formData, this.originalData);  
    },  
    findChanges(newData, oldData) {  
      // 找出新旧数据中存在但对方不存在的属性，即新增属性或被删除的属性  
      const newKeys = Object.keys(newData).filter(key => !Object.keys(oldData).includes(key));  
      const oldKeys = Object.keys(oldData).filter(key => !Object.keys(newData).includes(key));  
      console.log('新增属性:', newKeys); // 新增属性或被删除的属性  
      console.log('被删除属性:', oldKeys); // 新增属性或被删除的属性  
      // 对比新旧数据属性值是否发生改变，这里只简单判断新旧值是否相等，实际应用中可能需要更为详细的对比逻辑。  
      const changes = [];  
      Object.keys(newData).forEach(key => {  
        if (newData[key] !== oldData[key]) {  
          changes.push({ key, oldValue: oldData[key], newValue: newData[key] });  
        }  
      });  
      console.log('发生改变的属性:', changes); // 发生改变的属性及其新旧值  
    }  
  },  
  mounted() {  
    // 初始加载时保存原始数据，后续表单数据变动时将自动对比找出改动部分。注意这里使用setTimeout模拟异步数据加载。实际开发中根据实际情况进行数据加载。  
    setTimeout(() => {  
      this.originalData = Object.assign({}, this.formData); // 复制一份原始数据，用于后续对比。实际开发中原始数据可能是从服务器加载的异步数据。  
    }, 1000); // 假设1秒后数据加载完成，将原始数据保存在originalData中。实际开发中原始数据的加载时间可能会更长。  
  }  
}  
</script>

在Vue.js中，<form @submit.prevent="submitForm"> 是一个表单元素（<form>）绑定了一个事件监听器的示例。这里的监听器是用来处理表单的提交事件的。

1. <form>：这是HTML的表单元素，通常用于收集用户输入。
2. @submit：这是Vue的事件监听器语法，用于监听表单的submit事件。当表单尝试提交时（例如，当用户点击一个提交按钮时），这个事件就会被触发。
3. .prevent：这是一个事件修饰符，它告诉Vue在触发事件处理函数之前先调用event.preventDefault()。在表单提交的情况下，这通常会阻止浏览器默认的表单提交行为（即跳转到新页面或重新加载当前页面）。
4. "submitForm"：这是当表单提交事件被触发时将要调用的Vue实例中的方法名。这个方法通常定义在Vue组件的methods对象中，用于处理表单数据。

watch是一个非常有用的特性，它允许你对组件的数据进行观察和响应。当被观察的数据发生变化时，watch属性中的函数就会被调用。

1. watch: 这是 Vue 的一个选项，用于观察和响应组件的数据变化。
2. formData: 这是你要观察的数据属性名。这意味着当 formData 发生变化时，与其关联的 handler 函数就会被触发。
3. handler(newVal, oldVal): 这是一个函数，当 formData 发生变化时，这个函数会被调用。newVal 是 formData 的新值，而 oldVal 是它原来的值。
4. this.findChanges(newVal, oldVal): 在 handler 函数内部，你调用了 findChanges 方法，并将新值和旧值作为参数传递给它。这个方法可能是用来找出新旧值之间的差异或进行其他处理。
5. deep: true: 当设置为 deep: true 时，Vue 会深度观察 formData。这意味着不仅仅是 formData 的值会变化，其内部的对象或数组的任何变化也会触发 handler 函数。如果只是简单观察基本类型（如字符串或数字），则不需要设置 deep。