Vue.js Watchers

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 120+ pages ebook about the Vue fundamentals tomorrow!

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, like you can with computed properties.

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 120+ pages ebook about the Vue fundamentals tomorrow!