Arrays Vuejs监视动态数组元素的更改

我正在创建这个文本编辑器，其中包含名称和地址字段

<ckeditor :editor="editor" v-model="data[index].name">
<ckeditor :editor="editor" v-model="data[index].address.1">
<ckeditor :editor="editor" v-model="data[index].address.2">

编辑器还有两个按钮，next和back，方法是添加和删除“index”。 数据在从服务器装载之前加载，结构如下

serverdata = [{name:'name1',address:{1:'address 1',2:'address 2'}} , {name:'name2',address:{1:'address 4',2:'address 4'}}]

所以我想做的是，在服务器中的数据被加载后，用户可以在数据之间移动，当用户对其进行更改时，将记录用户更改的数据索引。 到目前为止，我一直在使用deep watcher，如下所示：

watch: {
    data: {
      handler(val) {
          console.log('the data is changed');
          console.log(this.index + 1);
      },
      deep: true
    }
  },

handler(newValue, oldValue) {
         if(newValue !== oldValue) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

但即使没有更改，当我单击“下一步”时，也会显示日志，

---

感谢您的帮助/建议

如果新旧值不同，您可以在console.log中比较它们。 您可以在函数中接收两个参数，如下所示：

watch: {
    data: {
      handler(val) {
          console.log('the data is changed');
          console.log(this.index + 1);
      },
      deep: true
    }
  },

handler(newValue, oldValue) {
         if(newValue !== oldValue) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

您可以将阵列中的内容与以下内容进行比较：

if(JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

好吧，你的问题似乎是你在接受旧的和新的价值观相同的价值观。您可以尝试查看计算属性，并使用该属性将数组转换为字符串。即使使用该字符串，您也可以重建旧数组。我试着做一个例子：

data() {
    return {
        yourArray: []
    }
},
computed: {
    yourArrayStr: function () { 
        return JSON.stringify(this.yourArray)
    }
},
watch: {
    yourArrayStr: function(newValue, oldValue) {
        if(newValue !== oldValue){
            let oldValueArray = JSON.parse(oldValue);
            console.log();
            console.log();
        }
    },
}

---

您好，谢谢您的帮助，但奇怪的是它不起作用，当我在console.log上检查时，newValue和oldValue都包含newValue，因此条件不满足，我更新了我的答案。“注意：当进行变异（而不是替换）时”一个对象或数组，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留预变异值的副本。“这是Vue文档中的内容，那么我如何跟踪对象内部的更改呢？感谢更新，但仍然不起作用，因为文档中说，oldval与newvalI相同，并再次更新XD。试着说如果有用。