TUTORIAL VUE 3 EPISODE 11 : WATCHERS

Welcome to episode 11 of our Vue 3 tutorial series! In this episode, we will be discussing watchers in Vue 3 and how they can be used to react to changes in data. Watchers are a powerful feature in Vue that allow you to perform side effects whenever the data being watched changes.

What are Watchers?

Watchers in Vue are used to perform an action when a certain piece of data changes. They are effectively used to “observe” changes in a piece of data and react accordingly. This can be useful for performing tasks such as logging, making API calls, updating other data, and more.

How to Use Watchers

To use watchers in Vue, you can define a “watch” property in your component options. Inside this property, you can define a function that will be called whenever the watched data changes. Here’s an example of how to use watchers in Vue 3:

        const app = {
            data() {
                return {
                    message: 'Hello, Vue!',
                }
            },
            watch: {
                message(newVal, oldVal) {
                    console.log(`Message changed from ${oldVal} to ${newVal}`);
                }
            }
        }
    

In the example above, we have a “message” property in our data, and we have defined a watcher for it. Whenever the “message” property changes, the watcher function will be called with the new and old values of the property. In this case, we are simply logging the change to the console, but you can perform any action you need inside the watcher function.

Conclusion

Watchers are a powerful tool in Vue that allow you to react to changes in data and perform side effects. They can be used to perform a wide range of tasks and are an important part of Vue’s reactivity system. We hope this tutorial has helped you understand how to use watchers in Vue 3!