¿Qué son 'watch' y 'computed' en Vue.js, y cómo funcionan?

watch (observadores)

• Se utiliza para reaccionar a cambios en una propiedad reactiva específica.
• Permite realizar operaciones asíncronas, retrasar la ejecución o realizar cálculos complejos cuando cambia el valor de la propiedad.
• Se configura mediante la opción watch dentro del componente.
• Puede tener parámetros handler (función manejadora), deep (observación profunda de objetos/arrays anidados) y immediate (ejecutar el manejador al crear el componente).

Ejemplo:

watch: {
  // Observa cambios en la propiedad `firstName`
  firstName(newValue, oldValue) {
    console.log(`El nombre cambió de ${oldValue} a ${newValue}`);
  },
  // Observa profundamente el objeto `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('La información del usuario ha cambiado.');
    },
    deep: true
  }
}

computed (propiedades computadas)

• Se utiliza para crear datos reactivos dependientes de manera declarativa.
• El resultado se almacena en caché hasta que cambien sus dependencias reactivas.
• Se calcula perezosamente, solo cuando se accede a él.
• Se configura mediante la opción computed dentro del componente.
• Debe devolver un valor.

Ejemplo:

computed: {
  // Calcula el nombre completo basado en firstName y lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtra la lista de usuarios
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Diferencias principales

Característica	watch	computed
Propósito	Reaccionar a cambios en una propiedad	Calcular datos dependientes
Caché	No	Sí (según dependencias)
Perezoso	No	Sí
Valor de retorno	No (ejecuta efectos secundarios)	Sí (devuelve un valor calculado)
Asincronía	Sí	No
Sintaxis	Objeto con funciones manejadoras	Objeto con funciones que devuelven valores

Utiliza computed para obtener datos reactivos derivados de otros datos. Usa watch para efectos secundarios (por ejemplo, llamadas API, cambios en el DOM) cuando cambia el valor de una propiedad reactiva, o para realizar reacciones lógicas más complejas.