vue 深度watch，新值和老值打印出来结果一致，怎么解决？

watch的基本用法：

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

但是如果需要监听的数据如下：

data: () => ({
    tableAll:{
       tableData:[]
    }
}),

则需要用到watch中的deep属性。

于是我们写成了这个：

computed:{
  newTableData(){
    return this.tableAll.tableData
  }
},
watch:{
  newTableData: {
    handler: function (value, oldValue) {
      console.log(value, oldValue)
    },
    deep: true
  }
},

但是问题来了，deep属性设置为true后，你查看控制台会发现，value 的值总是跟oldValue值一样。如果你的业务需要对这两个值（value，oldValue 均为数组）进行比较并提取出不同部分的话，这样就比较惆怅，那怎么办咩？

解决代码如下：

computed:{
  newTableData(){
    return JSON.stringify(this.tableAll.tableData)
  }
},
watch:{
  newTableData: {
    handler: function (value, oldValue) {
        let obj = JSON.parse(value);
            let obj2 = JSON.parse(oldValue);
        console.log(obj, obj2)
    },
    deep: true
  }
},

思路：就是将我们需要的值进行序列化和反序列化。这样打印出的值就是我们想要的了。

还有更好的思路的同学，希望在评论处贴出你的方法，交流学习一下。