Example of simple method to monitor objects with vue watch

The role of watch: listen for changes in data on vue instances

Example:

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

1. Ordinary watch

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

2. The watch of the array

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

3. The object's watch

data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
} 
 }
},
watch: {
bet: {
handler(newValue, oldValue) {
(newValue)
},
deep: true
}
}

tips: As long as the properties in bet change (which can be monitored), the handler function will be executed;

If you want to monitor specific attribute changes, such as when the pokerHistory changes, you can only execute the handler function, you can use the computed attributes to be used as the intermediate layer.
Examples are as follows:

4. Watch of the specific attributes of the object [use computed]

data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
} 
 }
},
computed: {
pokerHistory() {
return 
}
},
watch: {
pokerHistory(newValue, oldValue) {
(newValue)
}
}

Summarize

This is all about this article about vue watch monitoring objects. For more related contents of vue watch monitoring objects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!