为了账号安全,请及时绑定邮箱和手机立即绑定

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

2019.05.14 15:04 449浏览

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

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

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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消