Vue Watchers
A procedure that keeps an eye on a named data property is called a watcher.
Each time the value of a data property changes, a watcher is triggered.
If a certain data property value necessitates an action, use a watcher.
The Watcher Concept
The fourth configuration option we will learn about for the Vue instance is called Watchers. We have already examined the first three configuration options: “data,” “methods,” and “computed.”
The reserved name “watch” in the Vue instance is also shared by “methods,” “computed,” and “data” watchers.
Syntax
const app = Vue.createApp({
data() {
...
},
watch: {
...
},
computed: {
...
},
methods: {
...
}
})
A watcher keeps an eye on the same-named data property, as seen in the green section at the top.
A watcher method is never called. Only when the value of the property changes does it get called automatically.
Both the old and the updated property value are always accessible as input arguments for the observer method.
Example
You can modify the value of ‘rangeVal’ by using a <input type=”range”> element. To stop the user from selecting values between 20 and 60 that are deemed unlawful, a watcher is employed.
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
rangeVal: 70
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})
A Watcher with New and Old Values
Watcher methods automatically return the old property value as an input argument in addition to the new one.
Example
We utilize the method ‘updatePos’ to record the mouse pointer x-position ‘xPos’ when a click event occurs on a <div> element. By providing both the old and new input arguments to the watcher method, a watcher determines the difference in pixels between the new x-position and the prior one.
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
xPos: 0,
xDiff: 0
},
watch: {
xPos(newVal,oldVal){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})
Additionally, we can use both new and old values to inform the user at the precise moment that their input changes from invalid to valid:
Example
An <input> element’s value is linked to a watcher. If the value includes a ‘@’ it is regarded a genuine e-mail address. A feedback text is sent to the user informing them if the input was valid, invalid, or just became valid with the most recent keystroke.
<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = 'The e-mail address is NOT valid';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = 'Perfect! You fixed it!';
this.myClass = 'valid';
}
else {
this.feedbackText = 'The e-mail address is valid :)';
}
}
}
})
Watchers vs. Methods
Although both watchers and methods are expressed as functions, they differ greatly:
- From HTML, methods are called.
- When an event occurs, methods are frequently invoked.
- The event object is automatically entered into methods.
- Additional values that we select can also be sent as input to a method.
- Only when the value of the observed data attribute changes—which occurs automatically—are watchers triggered.
- Watchers automatically obtain both the old and new values from the property they are watching.
- With a watcher as an input, we are unable to select any other values to submit.
Watchers vs. Computed Properties
Both calculated properties and watchers are expressed as functions.
When a dependence changes, watchers and computed properties are triggered automatically; they are never triggered from HTML.
The following are some ways that watchers and calculated properties differ:
- The only asset on which watchers rely is the asset that they have been trained to see.
- Numerous properties can influence computed properties.
- Similar to data attributes, computed properties are also employed, however they are dynamic.
- HTML does not make reference to watchers.
