美文网首页vue技术栈
vuejs - 如何对某个对象的属性进行watch监听?

vuejs - 如何对某个对象的属性进行watch监听?

作者: 竹杖芒鞋轻胜码 | 来源:发表于2017-05-14 10:33 被阅读22409次

    1.普通的watch

    data() {
        return {
            frontPoints: 0    
        }
    },
    watch: {
        frontPoints(newValue, oldValue) {
            console.log(newValue)
        }
    }
    

    2.对象属性的watch

    data() {
      return {
        bet: {
          pokerState: 53,
          pokerHistory: 'local'
        }   
        }
    },
    watch: {
      bet: {
        handler(newValue, oldValue) {
          console.log(newValue)
        },
        deep: true
      }
    }
    

    tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
    如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
    事例如下:

    3.对象具体属性的watch

    data() {
      return {
        bet: {
          pokerState: 53,
          pokerHistory: 'local'
        }   
        }
    },
    computed: {
      pokerHistory() {
        return this.bet.pokerHistory
      }
    },
    watch: {
      pokerHistory(newValue, oldValue) {
        console.log(newValue)
      }
    }
    

    相关文章

      网友评论

        本文标题:vuejs - 如何对某个对象的属性进行watch监听?

        本文链接:https://www.haomeiwen.com/subject/snxqxxtx.html