vue watch 监听

一、普通的watchjavascript

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

 

二、数组的watch,注意监听数组的变更不须要deep: true 。java

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

fill方法使用给定值,填充一个数组。数组

['a', 'b', 'c'].fill(7)  
// [7, 7, 7]  
new Array(3).fill(7)  
// [7, 7, 7]  
['a', 'b', 'c'].fill(7, 1, 2)  
// ['a', 7, 'c']  

上面代码代表,fill方法用于空数组的初始化很是方便。数组中已有的元素,会被所有抹去。 函数

 

三、对象的watchpost

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



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

 四、对象具体属性的watch[活用computed]this

复制代码
data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    } } },
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
}, watch: {   pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}
复制代码
相关文章
相关标签/搜索