Vue.js Watchers

In Vue.js, watchers let you respond to changes in reactive data properties. While computed properties are ideal for derived values, watchers are particularly useful for performing side effects when data changes, such as making API calls, logging, or updating other variables. Watchers offer fine-grained control over how your application responds to state updates.

What is a Watcher?

A watcher is a function that observes a specific data property. When that property changes, the watcher runs automatically. This feature makes it easy to execute logic in response to data updates without modifying the DOM directly. Watchers are defined inside the watch option of a Vue instance.

Basic Watcher Example

In this example, a watcher responds when the value of name changes.

<div id="app">
  <input v-model="name" placeholder="Enter your name">
  <p>{{ name }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    },
    watch: {
      name: function (newVal, oldVal) {
        console.log('Name changed from', oldVal, 'to', newVal)
      }
    }
  });
</script>

In the example, name is a reactive property; the watcher logs both the old and new values whenever the name changes.

Use Case: Validating Input

Watchers are ideal for running validations based on user input.

<div id="app">
  <input v-model="age" type="number" placeholder="Enter your age">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      age: '',
      message: ''
    },
    watch: {
      age: function (value) {
        if (value < 18) {
          this.message = 'You must be at least 18 years old.'
        } else {
          this.message = 'Age accepted.'
        }
      }
    }
  });
</script>

When the user updates age, the watcher checks the value and updates the message accordingly.

Watcher Function Parameters

A watcher function receives two arguments:

• newVal: the updated value
• oldVal: the previous value

You can use these to compare states or trigger logic based on changes.

Deep Watchers

By default, Vue does not track nested property changes inside objects or arrays. To watch complex data structures, use a deep watcher.

watch: {
  user: {
    handler: function (newVal) {
      console.log('User object changed:', newVal)
    },
    deep: true
  }
}

Use this feature only when necessary, as deep watching can affect performance.

Immediate Watchers

To run the watcher immediately on component creation, set immediate: true.

watch: {
  status: {
    handler: function (val) {
      console.log('Initial status:', val)
    },
    immediate: true
  }
}

This feature is useful when you want to initialize something based on the current value.

Conclusion

In this tutorial, you learned how to use watchers in Vue.js to monitor and respond to changes in reactive data. You explored how to define basic watches, access both new and old values, and apply them to practical tasks like input validation. You also discovered advanced options, such as deep watchers for nested data and immediate watchers for triggering logic during initialization. With this understanding, you can manage side effects more effectively and build Vue applications that respond intelligently to user-driven changes.