Un Watcher en Vue.js es una función especial que permite observar un componente y realizar acciones específicas cuando cambia el valor del componente. Es una forma más genérica de observar y reaccionar a los cambios de datos en la instancia de Vue. Los vigilantes son los más útiles cuando se utilizan para realizar operaciones asincrónicas .
Nota: los observadores solo pueden cambiar una propiedad a la vez. Si se deben cambiar los valores de varios componentes, se pueden usar las propiedades calculadas.
Sintaxis:
watch: {
// We can add our functions here
}
Los vigilantes de Vue.js se pueden demostrar con el siguiente ejemplo:
Ejemplo: Primero crearemos una aplicación Vue.js simple sin usar ningún Watcher . La funcionalidad de este programa es cambiar el valor (multiplicar el valor de entrada por 2) del componente con un clic de botón.
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>
Salida:
el valor del resultado cambia al hacer clic en el botón
En el ejemplo anterior, el valor del valor del resultado cambia solo al hacer clic en el botón. Ahora usaremos el reloj para notar cambios en el componente de entrada y actualizar el valor del resultado automáticamente. Definiremos reloj y escribiremos las funciones necesarias dentro de él como se muestra a continuación:
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;
}
}
El Vigilante ahora busca cambios en el valor de entrada. Cada vez que cambia el valor de entrada, la función interna se ejecuta automáticamente (que multiplica el valor de entrada por 2), y el valor del resultado cambia automáticamente. No tenemos que asignar ningún evento de forma especial y esperar a que cambie el valor. Agregaremos los cambios anteriores al código anterior y eliminaremos el botón con su funcionalidad.
Ejemplo usando un Vigilante:
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>
Salida:
el valor del resultado cambia automáticamente cuando cambia el valor de entrada.
