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值一样。

解决代码如下：

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
  }
}

思路：将需要监听的值进行序列化和反序列化操作，新旧值就不相同了。