1. 程式人生 > >vue watch數組或者對象

vue watch數組或者對象

data tor con 如果 ted poi value poke handler

1、普通的watch

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

2、數組的watch

data() {
    return {
        winChips: new Array(11).fill(0)   
    }
},
watch: {
  winChips: {
    handler(newValue, oldValue) {
      
for (let i = 0; i < newValue.length; i++) {         if (oldValue[i] != newValue[i]) {           console.log(newValue)         }       }     },     deep: true   } }

3、對象的watch

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

tips: 只要bet中的屬性發生變化(可被監測到的),便會執行handler函數;如果想監測具體的屬性變化,如pokerHistory變化時,才執行handler函數,則可以利用計算屬性computed做中間層。事例如下:
4、對象具體屬性的watch[活用computed]

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

vue watch數組或者對象