Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
A watcher is a special Vue.js feature that allows you to spy on one property of the component state, and run a function when that property value changes.
Here’s an example. We have a component that shows a name, and allows you to change it by clicking a button:
<template>
<p>My name is {{name}}</p>
<button @click="changeName()">Change my name!</button>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
methods: {
changeName: function() {
this.name = 'Flavius'
}
}
}
</script>
When the name changes we want to do something, like printing a console log.
We can do so by adding to the watch
object a property named as the data property we want to watch over:
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
methods: {
changeName: function() {
this.name = 'Flavius'
}
},
watch: {
name: function() {
console.log(this.name)
}
}
}
</script>
The function assigned to watch.name
can optionally accept 2 parameters. The first is the new property value. The second is the old property value:
<script>
export default {
/* ... */
watch: {
name: function(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
}
</script>
Watchers cannot be looked up from a template as you can with computed properties.
Download my free Vue Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020