Vue.js Watchers

15 Oct, 2020
A Watcher in Vue.js is a special feature that allows one to watch a component and perform specified actions when the value of the component changes. It is a more generic way to observe and react to data changes in the Vue instance. Watchers are the most useful when used to perform asynchronous operations.
Note: Watchers can change only one property at a time. If multiple component values have to be changed, one can use computed properties.
Syntax:
watch: {
   // We can add our functions here
}

Vue.js Watchers can be demonstrated using the following example:
Example: We will first create a simple Vue.js app without using any Watcher. The functionality of this program is to change the value (multiply the input value by 2) of the component on a button click.
HTML
<!DOCTYPE html><html>  <head>    <title>Vue.js Watchers</title>      <script src=        "https://unpkg.com/vue">    </script></head>  <body>    <h1 style="text-align: center;              color: rgb(27, 114, 53);">        GeeksforGeeks    </h1>      <h3 style="text-align: center">        Vue.js | Watchers    </h3>      <!-- Creating element for Vue -->    <div style="text-align: center;" id="ex">        <h3>Enter any Value :            <input type="text" v-model="value1">        </h3>        <h3>Input number x 2 :            <span style="font-size: 30px;">                {{result}}            </span>        </h3>          <!-- Creating a Button -->        <button @click="multiply">            Click Me        </button>    </div>          <script>          // Creating instance        new Vue({            el: '#ex',            data: {                  // Setting values for fields                value1: '',                result: 0            },            methods: {                  // Creating function                 // for button click                multiply: function () {                    this.result = this.value1 * 2;                }            }        });    </script></body>  </html>
Output:The result value changes on button click
In the above example, the value of result value changes only on button click. We will now use watch to notice changes in the input component and update the result value automatically. We will define watch and write the needed functions within it as shown below:
Javascript
watch: {    // Creating function    // for input component    value1: function(val) {        this.value1 = val;        this.result = 2 * val;      },          // Creating function    // for result component    result: function(val) {        this.result = val;    }}
The Watcher now looks for changes in the input value. Whenever the input value changes, the function inside is automatically executed (that multiplies input value by 2), and the value of result changes automatically. We do not have to specially assign any events and wait for the value to change. We will add the above changes to the previous code and remove the button with its functionality.
Example using a Watcher:
HTML
<html>  <head>    <title>Vue.js Watchers</title>      <script src=        "https://unpkg.com/vue">    </script></head>  <body>    <h1 style="text-align: center;             color: rgb(27, 114, 53);">        GeeksforGeeks    </h1>      <h3 style="text-align: center">        Vue.js | Watchers    </h3>      <!-- Creating element for Vue -->    <div style="text-align: center;" id="ex">        <h3>Enter any Value :            <input type="text" v-model="value1">        </h3>        <h3>Input number x 2 :            <span style="font-size: 30px;">                {{result}}            </span>        </h3>    </div>          <script>        // Creating instance        new Vue({            el: '#ex',            data: {                // Setting values for fields                value1: '',                result: 0            },            // Creating a Watcher            watch: {                  // Creating function for                // input component                value1: function (val) {                    this.value1 = val;                    this.result = 2 * val;                },                  // Creating function for                // result component                result: function (val) {                    this.result = val;                }            }        });    </script></body>  </html>
Output:The result value changes automatically when the input value changes.
Vue.JS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.