A Simple Vue Watcher Tutorial For Beginners

code of a vuejs watcher

Throughout the course of developing a Vue app, you’ll have tons of reactive data properties. Your app will track input fields, data calculations, and a bunch of other properties and may need to perform an action when a value updates. A Vue watcher observes a specific property and is able to detect when that property changes. It essentially acts as an event listener to a specific data property.

I think that the best way to understand how watchers works in Vue is to look at an example. So enough wasting time! Let’s get into an example.

How do you use a Vue watcher?

The Vue Options API provides a watch option in which you can define your watchers. While this should still be valid in the new Vue3 Composition API, there will definitely be better designed solutions down the road. To use this, you must first have a property in your data object that you want to track. That code will look like this.

export default {
	data () {
		return {
			title: '',
			description: ''
	watch: {
		// your watchers will go in here!

Then, we have to look at the structure of a watcher method. All you have to do is declare a function with the same name as the property you want to observe. It should take two parameters: the first being the old value of the property and the second being the new value. This function will be triggered whenever the value changes.

For example, this is a watcher for the title property.

watch: {
	title: (newTitle, oldTitle) => {
		console.log("Title changed from " + oldTitle + " to " + newTitle)

Simple right! Watchers are not that confusing of a topic. In fact, they’re one of the basic principles of reactivity in any framework. The biggest pros and cons that come with watchers is their flexibility. On the positive side, they are very adaptable and can be used to make API calls, trigger secondary actions, and so on. Conversely, there are many times in which Vue offers an alternative solution to your use case, speaking of…

Warning! A Vue watcher is often NOT the solution

From a broader specific, watchers are a more generalized form of a VueJS computed property. And there are several times I’ve seen people use watchers unnecessarily when a computed property would serve the case with less work.

Computed properties are very good at handling use cases like:

  • Creating a new data value from existing (e.g. fullName = fName + lName)
  • Extracting a confusing JS expression into a more readable property
  • You want a property to react have more than one data dependency

In these cases, it’s better for your project both in terms of readability and maintainability to use computed properties. Additionally, there are also use cases in which just using a plain old method would do the trick without having to get into the more complex options of a Vue component.

I can’t tell you exactly what you need to use for your project. But there’s a great checklist from Flaviocopes that I recommend if you want help determining what’s the best case for you.

So when would I use a watcher?

After reading that last section you may be wondering, “Wait. So reading this article was pointless?” and no – there are definitely very common use cases in which using a watcher is still the best option.

Basically, if you need to perform some an additional action when a property changes, watchers are the way to go.

Some use cases are:

  • Observing a value until it reaches a specific value
  • Making an asynchronous API call when a value changes
  • You don’t need to combine existing data into a new property

That should be enough to get you started.

The information in this quick little tutorial is a great place to get started. As always, if you want more information about the technical details, I’d suggest looking at the documentation – which is one of my favorites for any framework.

Share Your Thoughts