Vue.js Watchers

Vue.js watchers are a feature that allows you to monitor and react to changes in a component's data properties. They come in handy when you have logic or actions that should be triggered based on specific data updates.

What Are Watchers?

In Vue.js, watchers are like personalized handlers that let you keep an eye on a data property and carry out actions whenever that property changes. While computed properties work well for straightforward reactive situations, watchers come in handy for more intricate cases where you want to handle tasks monitor nested objects or implement logic that doesn’t quite fit into computed properties.

Create a Watcher

When you want to set up a watcher in a Vue component, you do it by specifying an object in the watch option. The objects key corresponds to the data property you wish to monitor, while the value is a function that gets triggered whenever there’s a change in that property.

Basic Example

<template>
  <div>
    <p>Greetings Message: {{ greetingsMessage}}</p>
    <input v-model="greetingsMessage" placeholder="Type a greeting message!">
  </div>
</template>

<script>
export default {
  data() {
    return {
      greetingsMessage: '',
    };
  },
  watch: {
    greetingsMessage(newValue, oldValue) {
      console.log(`Greetings message changed from…