其他分享
首页 > 其他分享> > vue watch监听数据,新老值一样?让其不一样吧!

vue watch监听数据,新老值一样?让其不一样吧!

作者:互联网

vue watch监听数据,新老值一样?让其不一样吧!

 

    data:{
        testData:{
            dataInfo:{
                a: '我是a',
                b: '我是b'
            }
        }
    },
    watch: {
      testData: {
        handler: (val, olVal) => {
          console.log('我变化了', val, olVal)
        },
        deep: true
      }
    }

如果testData发生了变化,就会打印出val,olVal,但是他们打印出来的结果都是一样的,因为数据同源。虽然可以监听到他的变化,但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。

    data:{
        testData:{
            dataInfo:{
                a: '我是a',
                b: '我是b'
            }
        }
    },
    watch: {
      testDataNew: {
        handler: (val, olVal) => {
          console.log('我变化了', val, olVal)
        },
        deep: true
      }
    },
    computed: {
      testDataNew() {
        return JSON.parse(JSON.stringify(this.testData))
      }
    }

 

标签:vue,dataInfo,val,watch,新老值,olVal,testData,监听
来源: https://blog.csdn.net/chenjing0823/article/details/96429867