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

示例：

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、對(duì)象的watch

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

tips: 只要bet中的屬性發(fā)生變化（可被監(jiān)測(cè)到的），便會(huì)執(zhí)行handler函數(shù)；

如果想監(jiān)測(cè)具體的屬性變化，如pokerHistory變化時(shí)，才執(zhí)行handler函數(shù)，則可以利用計(jì)算屬性computed做中間層。事例如下：

4、對(duì)象具體屬性的watch［活用computed］

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

總結(jié)

到此這篇關(guān)于vue watch監(jiān)控對(duì)象的文章就介紹到這了,更多相關(guān)vue watch監(jiān)控對(duì)象內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！