<转> vue watch对象内的属性监听（备忘）

2019-05-15 16:45:25 阅读：244 来源： 互联网

标签：vue watch 备忘 newval oldVal msg 监听 channel

https://www.jianshu.com/p/9ada0b5f04d5?utm_campaign

vue可以通过watch监听data内数据的变化。通常写法是：

new Vue({
  data: {
    a: 100，
    msg:{
        channel:'音乐',
        style:'活泼'
    }
  },
  watch: {
    a: function (newval, oldVal) {
      console.log('new: %s, old: %s', newval, oldVal)
    }
  }
})

但是如果你要监听的数据是对象内的某一属性，直接watch对象的属性(eg:msg.channel)就会报错

而监听整个对象的时候（eg:msg）会发现无论何时newval和oldVal的值都是一样的，这是因为msg这个对象的指向并没有发生改变，所以需要深度监测

watch: {
    msg: {
        handler(newValue, oldValue) {
            console.log(newValue)
        },
        deep: true
    }
}

如果监听对象内的某一具体属性，可以通过computed做中间层来实现

computed: {
    channel() {
        return this.msg.channel
    }
},
watch:{
    channel(newValue, oldValue) {
        console.log('new: %s, old: %s', newval, oldVal)
        //这里面可以执行一旦监听的值发生变化你想做的操作
    }
}

尊重版权哦！

作者：形影相随_371e
链接：https://www.jianshu.com/p/9ada0b5f04d5
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

标签：vue,watch,备忘,newval,oldVal,msg,监听,channel
来源： https://www.cnblogs.com/lml2017/p/10870324.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

<转> vue watch对象内的属性监听（备忘）