如何检测 Vue 中已编辑字段中所做的更改？答案

【问题标题】：How to detect changes made in the edited field in Vue?如何检测 Vue 中已编辑字段中所做的更改？
【发布时间】：2018-10-11 12:55:17
【问题描述】：

我有一个这样的对象：

users: {
    email: '',
    password: ''
}

当用户编辑某些内容时，我想检测在users 对象的键中所做的更改并将该键保存在另一个对象中（比如editedFields）！我该怎么做？

我尝试过像这样使用深度观察者：

watch: {
    users: {
        handler: function(val, oldVal) {
            //
        },
        deep: true
    }
}

但我不知道如何获得编辑后的密钥！请帮忙

【问题讨论】：

标签： javascript vue.js vue-reactivity

【解决方案1】：

我认为这可行：

watch: {
    'users.email': function(newEmail, oldEmail) {
        //
    }
}

【讨论】：

这很酷，但是对象中有大约五十个键，我不能这样做。那么，还有其他方法吗？我的意思是只是观察对象并获取编辑后的值？
我会说你可能做错了什么——很抱歉直言不讳。为什么要复制数据？您永远不需要复制 50 个变量。

【解决方案2】：

我认为这样的事情可能有用吗？

data: function() {
  return {
    user: { 
      email: '',
      password: ''
    },
    editedFields: []
  }
},
watch: {
  users: {
    handler: function(val, oldVal) {
      for (var key in val) {
        if(val[key] != oldVal[key]) {
          this.data.editedFields.push(key);
        }
      }
    },
    deep: true
  }
}

但实际上，更好的处理方法是为每个字段创建一个新的 Vue 组件。然后，您可以测试它是否在每个组件中进行了更新。

【讨论】：