Obtenga más información sobre los observadores de Vue.js para mejorar el desarrollo de su aplicación web

Conclusiones clave

• Los marcos de JavaScript como Vue ofrecen funciones como arquitectura de componentes, gestión de estado y enrutamiento para simplificar el desarrollo de aplicaciones web.
• Los observadores de Vue son funciones que monitorean los cambios en las propiedades reactivas y le permiten reaccionar a eventos y modificaciones de datos.
• Al comparar los observadores con las propiedades calculadas, las propiedades calculadas son más concisas y más fáciles de leer, lo que resulta en un mejor rendimiento y depuración.

Los marcos de JavaScript se han convertido en una parte vital del desarrollo web. Esto se debe a sus funciones de fácil acceso, incluida la arquitectura de componentes, la gestión del estado y el enrutamiento. Estos ayudan a reducir el estrés, el esfuerzo y el tiempo necesarios para crear una aplicación web desde cero.

Vue, uno de estos marcos, ofrece muchas funciones para acelerar el desarrollo. La función de vigilancia le permite monitorear los valores de variables y expresiones durante la ejecución del programa.

¿Qué son los observadores en Vue?

Los observadores de Vue son funciones que monitorean los cambios en una propiedad reactiva y responden en consecuencia. Los observadores le permiten reaccionar ante eventos y modificaciones de datos.

Para utilizar un observador, importe el mirar función de la vista paquete en su script:

<scriptsetup>
import { watch } from 'vue';
script>

Ahora puede usar la función de vigilancia para implementar un observador en su componente Vue. He aquí un ejemplo sencillo:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Este componente simple utiliza la función de vigilancia para monitorear el cambio en el nombre de un usuario. La sección de plantilla del fragmento define la estructura HTML del componente, que incluye un pag etiqueta que muestra el valor de la variable reactiva del usuario.

La plantilla también contiene un elemento de botón, con un cambiar nombre función adjunto a un detector de eventos de clic. Cuando la variable de usuario cambia, Vue activa la función de devolución de llamada. La función de devolución de llamada muestra una alerta: "El nombre de usuario cambió de "Chinedu" a "Victor".

Comparación de observadores con propiedades calculadas

Es importante comprender la diferencia entre observadores y propiedades calculadas. Aunque ambas se usan como herramientas de reactividad en Vue, debes usarlas para diferentes propósitos.

Por ejemplo, podrías calcular la suma de la edad de un padre y un hijo con observadores, así:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

Este componente de Vue utiliza observadores para obtener la suma de las edades del padre y del hijo. Para hacerlo, crea una nueva variable reactiva, total. Puedes crear un variable reactiva cuando usas la API de composición de Vue.

El fragmento luego emplea dos mirar Funciones para vigilar las edades del hijo y del padre. Para cada edad, ya sea padre o hijo, el fragmento suma el nuevo valor con la edad del otro. Luego guarda el resultado en el total variable reactiva.

Considere el mismo escenario en el fragmento anterior que usa propiedades calculadas:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Este fragmento, en comparación con el anterior, es más conciso y más fácil de leer. El fragmento obtiene la suma de la edad del padre y del hijo y la guarda en una referencia calculada (variable), total. La sección de plantilla luego muestra la variable total usando interpolación, una técnica de enlace de datos en Vue.

Incluso si se puede obtener el total de las dos edades con observadores, es mejor hacerlo con propiedades calculadas. El uso de observadores en esta situación puede generar tiempos de carga más lentos y una depuración más difícil simplemente porque implica más código.

No utilice observadores como reemplazo de las propiedades calculadas. Utilice observadores para monitorear y reaccionar a los cambios de datos y propiedades calculadas cuando desee derivar nuevos datos a partir de datos reactivos existentes.

El inmediato La opción es una configuración que puede utilizar al crear un observador. Esta opción determina si el observador debe activar su devolución de llamada inmediatamente después de que Vue haya montado el componente.

A continuación se muestra un ejemplo de un componente que utiliza un observador con la opción inmediata:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

En el fragmento anterior, el observador ejecutará su devolución de llamada inmediatamente después de la inicialización del componente y registrará "El recuento cambió de indefinido a 10" en la consola. Esto muestra que la variable inicial no estaba definida antes de que Vue inyectara el valor de 10 al recuento de referencia.

La opción inmediata puede resultar útil en escenarios en los que desea realizar una acción inicial o una inicialización basada en el valor actual de la propiedad supervisada. Por ejemplo, cuando necesita que su aplicación obtenga datos de una API una vez que Vue monta un componente.

La opción profunda disponible en Vue Watchers

El profundo La opción disponible cuando se trabaja con observadores en Vue permite una observación profunda de los cambios dentro de objetos o matrices anidados. Cuando se establece en verdadero, el observador puede detectar cambios dentro de las propiedades anidadas.

Aquí hay un ejemplo de un componente de Vue con la opción profunda:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

El fragmento de arriba inicializa el datos ref con un objeto que contiene un longitud propiedad. El fragmento establece la opción profunda en verdadero. Luego registra en la consola que los datos han cambiado desde que la propiedad de longitud cambió a 43.

Sin la opción profunda configurada en verdadero, la función de vigilancia no notará ningún cambio en el objeto. Sin embargo, Vue rastrea todos los cambios anidados y profundos sin la opción profunda cuando inicializas la variable de datos como un objeto reactivo:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

La función de vigilancia en el fragmento anterior registrará en la consola que los datos cambiaron porque la variable de datos es un objeto reactivo.

Cree mejores aplicaciones con Vue Watchers

Los observadores de Vue pueden ayudarle a lograr una reactividad detallada en sus aplicaciones. Controlan cómo se pueden observar cambios en las propiedades de los datos y ejecutar una lógica personalizada en respuesta.

Comprender cuándo usar observadores, sus diferencias con las propiedades calculadas y opciones como inmediata y profunda puede mejorar significativamente su capacidad para crear aplicaciones Vue con gran capacidad de respuesta.