watch监听,新数据和旧数据一样

项目中,用watch监听一个对象时,要对比它的新旧数据,哪些属性发生变化时,发现打印出来的数据都是一样(是可以触发watch监听事件的)。

watch: {
    watchModel: {
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true
    }

究其原因,就是vue新旧的值只是简单的赋值,对于引用类型来说指向的都是同一个地址,值自然也相同,所以利用计算属性进行深拷贝就可以解决问题(computed缓存依赖需要监听的对象,正好进行深拷贝)

引用官网的一句话就是
image

解决办法
image

用computed计算属性,创建一个新的监听对象,用新的计算属性(watchModel)监听,都不用deep: true

posted @ 2022-07-21 11:30  嘿!那个姑娘  阅读(1330)  评论(0编辑  收藏  举报