Vue watch 监听复杂对象变化，oldvalue 和 newValue 一致的解决办法

例如我们监听如下数据格式 数组Array或者是对象Object格式的字段

 

data() {
    return {
        dataList: [{
                name: "里斯",
                age: 18,
                sex: "男"
            },
            {
                name: "阿里路亚",
                age: 16,
                sex: "女"
            }
        ]
    }
}

data() {
    return {
        dataList: {
            name: "里斯",
            age: 18,
            sex: "男"
        }
    }
}

 

watch的常规用法：

watch:{
  dataList: function (value, oldValue) {
      console.log(value, oldValue)
  }
}

 

通过watch就会打印出newValue，oldValue，但是他们打印出来的结果都是一样的。因为数据同源，虽然可以监听到数据发生了变化，但是要比较数据差异就不行了。如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。代码如下；

 

computed:{
  dataListNew(){
      return JSON.parse(JSON.stringify(this.dataList));
    }
},
watch:{
  dataListNew: {
    handler: function (newValue, oldValue) {
        console.log(newValue, oldValue);
    },
    deep: true
  }
}