Monitoring Changes with Watchers

Hello, students! Welcome to Lesson 1 of Watchers in Vue.js. Today, we will learn about watchers.

Watchers are a way to react to changes in data.

For example, you can use watchers to update the user interface when data changes.

How do watchers work?

Watchers are created using the watch keyword.

The syntax for creating a watcher is as follows:

watch(property, callback) {
  // code to react to the change
}

Where:

• property is the property you want to watch.
• callback is the function that will be executed when the property changes.

The callback function receives two parameters:

• oldValue is the old value of the property.
• newValue is the new value of the property.

Advantages of Watchers

Watchers offer several advantages, including:

• Reactivity: Watchers allow your application to be reactive to changes in data.
• Organization: Watchers can help organize your code.
• Flexibility: Watchers can be used to react to changes in data in any way.

Examples of Watchers

Here are some examples of watchers:

watch('text', function(oldValue, newValue) {
  // Update the user interface with the new value of the text
});

In the example above, the watcher observes the text property. When the text property changes, the callback function will be executed.

The callback function updates the user interface with the new value of the text.

watch('number', function(oldValue, newValue) {
  // Perform an action when the number changes
});

In the example above, the watcher observes the number property. When the number property changes, the callback function will be executed.

The callback function performs an action when the number changes.

Challenge

Here’s a challenge for you:

• Create a component that displays a text. Use a watcher to update the text when the user changes an input.

Good luck!

Tip

You can use the following code as a starting point:

<template>
  <div>
    <input type="text" v-model="text">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

In the next topic, we will learn how to use watchers to react to specific changes.