Vue Basics: Intro to Vue.js Watchers

Watchers can be a powerful tool but should only be used when there isn’t a better option. Let’s dig into this.

Watchers in Vue.js are one of the most powerful tools—one of the most flexible but also one of the easiest to misuse.

Let’s start by taking a look at what a watcher is.

What Watchers Are

Oftentimes when writing code you will find yourself looking at a property or computed value and wishing that you could do something when the computed or data property’s value changes.

In the Vue world, we look at the do something portion of the above statement and call it a side effect.

A practical (but rather advanced) example would be to watch a component’s prop and use Vue Router to modify the current URL. In this example, the side effect would be using Vue Router to modify the current URL whenever a prop changes.

A more straightforward example would be to watch the bound value of a <select> element and display a timed alert for the user notifying them that the changes to their selection have been saved.

In this article, we will explore the second, and I have purposely described fist the “complex” scenario because the example we will work on can be rewritten without using watchers—which is always preferable.

What Watchers Are Not

Watchers are not computed properties. If you ever find yourself creating a watcher to write the value of another property, for example, you should first ask yourself if this could be a computed property.

This is a common pitfall. I have seen many developers—beginners and experts alike—misuse watchers when a simpler solution with computed properties or other tools such as trading a v-model for event listeners would have done the job even better (more on this later).

Watchers are an incredible tool, and you should use them—but only when no other tool will do a better job. Debugging and keeping track of watchers is far more complicated than a tool like computed properties. Save yourself and your colleagues a headache and really consider if using one is the right solution for your given problem.

How to Use a Watcher

In order to learn how to use watchers we’ll create a demo of the scenario I presented earlier: Whenever the user changes the value of a select we will pretend we are saving this value on the backend and alert the user their changes have been saved.

We’ll start by laying out the HTML and setting up a v-model to the select so we can keep track of the value the user selected.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  })
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select v-model="pet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

Note that along the select I have added a p tag to the header which will only display whenever changesSaved is true.

What we need is to create a side effect. Whenever the value of pet changes, we want to display something to the user as a consequence.

Let’s add a watcher for this.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  }),
  watch: {
    pet (val, oldVal) {
      if (val === oldVal) return
      this.changesSaved = true
      setTimeout(() => {
        this.changesSaved = false
      }, 2000)
    }
  }
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select v-model="pet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

When adding a watcher, we add a new property to the watch object within the options of our component. The name of this property must match the name of the data property or computed property we are trying to watch—in this case pet.

Every watcher will receive two params: the first one val with the value the watched property is changing to, and the second one oldVal with the value it used to hold before.

For good measure, we are checking that val and oldVal are not the same. If they are, we don’t want to display a notification for the user, so we return out of the function.

Next, we change the value of changesSaved to true so that the v-if statement renders our alert to the user on the screen. Notice that the setInterval statement that follows will execute after 2 seconds (2000 ms), flipping the value of changesSaved back to false.

We have successfully created a watcher! As a quick sanity check, we can always try to figure out if there was a way to solve this with a computed property, and due to the nature of the setTimeout that we want to add here, it wouldn’t be possible otherwise.

The Better Way

Initially I told you that the problem with this example was that there was another way to solve the problem without watchers. I will showcase this solution using a split double-binding on the select as the preferred way to approach the problem.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  }),
  methods: {
    updatePet(event) {
      this.pet = event.target.value 
      this.changesSaved = true
      setTimeout(() => {
        this.changesSaved = false
      }, 2000)
    }
  }
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select :value="pet" @change="updatePet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

For this less complicated scenario, the option of splitting up the v-model into value and @change is cleaner. There are no hard-to-debug watchers and the code is easier to follow.

Wrapping Up

There may be scenarios where your code will require a watcher, and for those scenarios we could not ask for a better tool in Vue. Watchers are flexible and powerful, but come with a high cost in ease to debug and are harder to understand at a glance.

Keep this tool ready at hand and always question if there is a better way to approach the problem.