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

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)
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • handler:监听数组或对象的属性时用到的方法 deep:深度监听,为了发现对象内部值的变化,可以在选项参数中指...
    乖乖果效36阅读 6,722评论 1 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,288评论 25 708
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,149评论 6 13
  • 高数考完了,活在当下,不去想。 先前收拾了一会东西,乱七八糟的东西,好多东西仿佛不记得在哪里一般,大概收拾了一部分...
    听雷雷说阅读 378评论 1 1
  • 继续加拿大行程的准备工作。昨天研究清楚了签证资料,今天研究行程发现了时间少,真真是哪里都想去,哪里都不好做取舍。9...
    旅行的朋友阅读 123评论 0 0