[分享]vue 實戰問題-watch 陣列或者物件

tracy丶傑發表於2018-02-05

很多時候我們需要監聽資料,可能是路由,型別可能會是字串,陣列,物件,整理了下幾種監聽的方式。

普通的watch

data() {
    return {
        frontPoints: 0    
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}
複製程式碼

陣列的watch

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

物件的watch

data() {
&emsp;&emsp;return {
&emsp;&emsp;&emsp;&emsp;bet: {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;pokerState: 53,
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;pokerHistory: 'local'
&emsp;&emsp;&emsp;&emsp;}   
    }
},
watch: {
&emsp;&emsp;bet: {
&emsp;&emsp;&emsp;&emsp;handler(newValue, oldValue) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;console.log(newValue)
&emsp;&emsp;&emsp;&emsp;},
&emsp;&emsp;&emsp;&emsp;deep: true
&emsp;&emsp;}
}
複製程式碼

只要bet中的屬性發生變化(可被監測到的),便會執行handler函式;

如果想監測具體的屬性變化,如pokerHistory變化時,才執行handler函式,則可以利用計算屬性computed做中間層。

事例如下:

物件具體屬性的watch[活用computed]

data() {
&emsp;&emsp;return {
&emsp;&emsp;&emsp;&emsp;bet: {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;pokerState: 53,
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;pokerHistory: 'local'
&emsp;&emsp;&emsp;&emsp;}   
    }
},
computed: {
&emsp;&emsp;pokerHistory() {
&emsp;&emsp;&emsp;&emsp;return this.bet.pokerHistory
&emsp;&emsp;}
},
watch: {
&emsp;&emsp;pokerHistory(newValue, oldValue) {
&emsp;&emsp;&emsp;&emsp;console.log(newValue)
&emsp;&emsp;}
}
複製程式碼

相關文章