Watchers and Side Effects

Welcome back! You have already learned how to use computed properties to keep your Todo Application’s UI in sync with your data. In the last lesson, you saw how computed properties can filter your list of tasks and calculate counts automatically as your data changes. This approach keeps your code clean and efficient, and it is a core part of building reactive applications in Vue.

Today, you will take your skills a step further by learning about watchers. While computed properties are great for deriving new values from your data, sometimes you need to react to changes by running extra code — such as saving data, logging changes, or triggering animations. This is where watchers come in. In this lesson, you will learn what watchers are, how they work, and how to use them to handle side effects in your Vue applications. By the end, you will be able to use watchers to make your Todo Application even more interactive and responsive.

A watcher in Vue is a special function that lets you “watch” a piece of reactive data and run some code whenever that data changes. This is different from a computed property, which is used to calculate and return a value based on other data. Computed properties are for deriving values, while watchers are for running side effects.

For example, you might use a watcher to save your Todo list to local storage every time it changes or to log a message when a user completes a task. Watchers are very useful when you need to do something in response to a change, but you do not want to display a new value in the UI.

In real-world Vue applications, common use cases for watchers include:

• Logging changes for debugging or analytics
• Fetching new data when a filter or search term changes
• Saving user input automatically
• Animating UI elements in response to data changes

Watchers give you fine-grained control over how your app responds to changes in state.

To use a watcher in Vue’s Composition API, you use the watch() function. The basic syntax looks like this:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log('Count changed from', oldValue, 'to', newValue);
});

In this example, count is a reactive variable. The watch() function takes two arguments: the variable you want to watch and a callback function that runs whenever the value changes. The callback receives the new value and the old value as arguments.

If you run this code and then change count.value, you will see output like:

Count changed from 0 to 1

This is a simple way to react to changes in your data.

By default, Vue’s watch() function only watches the top-level value of a variable. This is called shallow watching. If you are watching a simple value like a number or a string, this is all you need. However, if you are watching an array or an object, changes to nested properties will not trigger the watcher unless you use the deep option.

For example, in your Todo Application, the todos variable is an array of objects. If you want to watch for any change inside the array — such as adding, removing, or updating a task — you need to set the deep option to true:

watch(todos, (newTodos, oldTodos) => {
  console.log('Todo list changed!');
}, { deep: true });

With deep: true, the watcher will trigger whenever any property inside the todos array changes, not just when the array itself is replaced. This is important for keeping track of changes in complex data structures.

Watchers are especially useful for handling side effects — actions that happen as a result of data changing but are not directly related to the UI. In your Todo Application, you might want to log a message whenever a task is added, removed, or updated.

Here is how you can set up a watcher to do this:

watch(todos, (newTodos, oldTodos) => {
  console.log('Todo list changed!');
  if (newTodos.length > oldTodos.length) {
    console.log('A new task was added:', newTodos[newTodos.length - 1].text);
  } else if (newTodos.length < oldTodos.length) {
    console.log('A task was removed.');
  } else {
    console.log('A task was updated (e.g., completed).');
  }
}, { deep: true });

With this watcher, every time the todos array changes, you will see a message in the console. If a new task is added, it will log the text of the new task. If a task is removed, it will log that a task was removed. If a task is updated (for example, marked as completed), it will log that a task was updated.

Here is an example of what you might see in the console:

Todo list changed!
A new task was added: Write documentation

Or, if you mark a task as completed:

Todo list changed!
A task was updated (e.g., completed).

This is a practical way to keep track of changes in your application and to trigger any side effects you need.

It is important to know when to use watchers and when to use computed properties. Use computed properties when you need to calculate and display a value based on other data. Use watchers when you need to run code in response to a change, especially if it involves side effects like logging, saving data, or making network requests.

Be careful not to overuse watchers. Too many watchers can make your code harder to understand and can affect performance, especially if you use deep watchers on large or complex data structures. Always ask yourself whether a computed property would be a better fit for your use case.

Also, remember that deep watchers can be more expensive because they have to track changes to every property inside an object or array. Use them only when necessary, and try to keep your data structures as simple as possible.

In this lesson, you learned what watchers are and how they differ from computed properties. You saw how to set up a basic watcher, how to use the deep option for arrays and objects, and how to use watchers to handle side effects in your Todo Application. You also learned some best practices for deciding when to use watchers and how to avoid common pitfalls.

Now you are ready to put these skills into practice. In the next set of exercises, you will use watchers to track changes in your Todo list and trigger side effects like logging. Keep experimenting and exploring — each new concept brings you closer to mastering advanced forms and reactivity in Vue!