vue watch对象内的属性

最新推荐文章于 2024-10-01 23:29:04 发布

weixin_34248258

最新推荐文章于 2024-10-01 23:29:04 发布

阅读量126

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/232595/blog/1837242

版权

2019独角兽企业重金招聘Python工程师标准>>>

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)
　　　　//这里面可以执行一旦监听的值发生变化你想做的操作
　　}
  }

转载于:https://my.oschina.net/u/232595/blog/1837242