vue2之对象属性的监听

对象属性监听的两种方法：

1.普通的watch

 1 data() {
 2     return {
 3         frontPoints: 0    
 4     }
 5 },
 6 watch: {
 7     frontPoints(newValue, oldValue) {
 8         console.log(newValue)
 9     }
10 }

2.对象属性的watch

 1 data() {
 2 　　return {
 3 　　　　bet: {
 4 　　　　　　pokerState: 53,
 5 　　　　　　pokerHistory: 'local'
 6 　　　　}   
 7     }
 8 },
 9 watch: {
10 　　bet: {
11 　　　　handler(newValue, oldValue) {
12 　　　　　　console.log(newValue)
13 　　　　},
14 　　　　deep: true
15 　　}
16 }

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

3.对象具体属性的watch

 1 data() {
 2 　　return {
 3 　　　　bet: {
 4 　　　　　　pokerState: 53,
 5 　　　　　　pokerHistory: 'local'
 6 　　　　}   
 7     }
 8 },
 9 computed: {
10 　　pokerHistory() {
11 　　　　return this.bet.pokerHistory
12 　　}
13 },
14 watch: {
15 　　pokerHistory(newValue, oldValue) {
16 　　　　console.log(newValue)
17 　　}
18 }

对象具体属性的watch可以直接用引号把属性括起来，就可以实现对象中特定属性的监听事件：

 1 data() {
 2 　　return {
 3 　　　　bet: {
 4 　　　　　　pokerState: 53,
 5 　　　　　　pokerHistory: 'local'
 6 　　　　}   
 7     }
 8 },
 9 watch: {
10 　　'bet.pokerHistory'(newValue, oldValue) {
11 　　　　console.log(newValue)
12 　　}
13 }