Watchers

In Vue, watchers are a feature that allows us to watch for changes on a specific data property and perform custom logic in response to those changes.

Watchers are useful when we need to react to changes in data properties that aren't directly tracked by Vue's reactivity system, such as deep changes in nested objects or arrays, or when we need to perform asynchronous or expensive operations in response to changes.

Basic Usage:

We can define a watcher in the "watch" option of a Vue component.

Each watcher is defined as a key-value pair, where the key is the name of the property to watch, and the value is a function that will be called whenever the watched property changes.

Example:

import Vue from "vue";

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    }
  }
});

Note: a watcher is defined for the "count" data property. Whenever the "count" property changes, the watcher function will be called with the new value and the old value.

Deep Watching:

By default, watchers perform shallow watching, which means they won't detect changes within nested objects or arrays.

Example:

import Vue from "vue";

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
 watch: {
  'obj.property': {
    handler(newValue, oldValue) {
      console.log('Nested property changed from ', oldValue, ' to ', newValue);
    },
    deep: true
  }
}
});

However, we can enable deep watching by setting the "deep" option to "true".

Note: the watcher will detect changes within the "property" of the "obj" object, even if the "obj" object itself is not reassigned.

Immediate Watching:

Example:

import Vue from "vue";

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
 watch: {
  count: {
    handler(newValue, oldValue) {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    },
    immediate: true
  }
 }
});

By default, watchers are only triggered when the watched property's value changes.

We can set the immediate option to true if we want the watcher to be called immediately after the component is created, with the current value of the watched property.

Example:

import Vue from "vue";

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
 watch: {
  count(newValue, oldValue) {
    this.fetchData(newValue);
  }
 },
 methods: {
  async fetchData(newValue) {
    // Perform asynchronous operation
  }
 }
});

the "watcher" for the "count" property will be called immediately after the component is created, logging the current value of the "count".

Async Watching:

Watcher functions can also be asynchronous, allowing us to perform async operations in response to property changes.

The "fetchData" method is called asynchronously whenever the "count" property changes.

Note:

Watchers in Vue.js provide a flexible way to reactively observe changes in data properties and perform custom logic in response.

They are particularly useful for scenarios where we need to respond to changes that aren't covered by Vue's reactivity system, such as deep changes in nested data or asynchronous operations.

<-- CSS-Binding

Forms -->