watch的作用：監(jiān)聽vue實例上數(shù)據(jù)的變動

示例：

queryData: {name: ’’,creator: ’’,selectedStatus: ’’,time: [],},

1、普通的watch

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

2、數(shù)組的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中的屬性發(fā)生變化（可被監(jiān)測到的），便會執(zhí)行handler函數(shù)；

如果想監(jiān)測具體的屬性變化，如pokerHistory變化時，才執(zhí)行handler函數(shù)，則可以利用計算屬性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監(jiān)控對象的文章就介紹到這了,更多相關vue watch監(jiān)控對象內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！