Observadores(Watch): Introdução e Detalhamento

No Vue.js, observadores (watchers) são uma funcionalidade poderosa que permite reagir a mudanças em dados reativos, executando código sempre que especificados dados mudam. Este recurso é particularmente útil para realizar ações em resposta a mudanças de estado que não são adequadas para serem realizadas dentro de computadas (computed properties).

Uso de Observadores

Os observadores são ideais para casos onde você precisa executar operações assíncronas ou caras em resposta a mudanças nos dados, ou quando essas operações dependem de mais de uma propriedade reativa. Por exemplo, você pode querer fazer uma chamada API quando um usuário altera um formulário, ou validar um campo baseado em vários outros dados.

Exemplo de Observador em Script Setup com TypeScript

Vamos considerar um exemplo prático usando a <script setup> syntax, que é uma forma mais concisa e declarativa de escrever componentes single-file (SFCs) no Vue 3. Vamos observar mudanças em uma propriedade reativa e executar uma ação quando ela muda.

<script setup lang="ts">
import { ref, watch } from "vue";

// Criando uma propriedade reativa
const counter = ref(0);

// Definindo um observador para a propriedade `counter`
watch(counter, (newValue, oldValue) => {
  console.log(`O contador mudou de ${oldValue} para ${newValue}.`);
  // Aqui você poderia, por exemplo, enviar essa informação para uma API.
});

// Uma função para incrementar o contador
function incrementCounter() {
  counter.value++;
}
</script>

<template>
  <div>
    <p>Contador: {{ counter }}</p>
    <button @click="incrementCounter">Incrementar</button>
  </div>
</template>

Explicação:

• ref é usado para criar uma variável reativa.
• watch é usado para observar a variável counter. Quando counter muda, a função dentro de watch é executada, recebendo o novo valor (newValue) e o valor antigo (oldValue).
• O botão no template chama incrementCounter, que incrementa o valor de counter.

Observando Propriedades de Objeto

Em casos onde você tem um objeto com múltiplas propriedades que podem mudar, você pode querer observar todo o objeto ou propriedades específicas dele. Aqui está como você pode fazer isso:

<script setup lang="ts">
import { reactive, watch } from "vue";

// Criando um objeto reativo
const userProfile = reactive({
  name: "Alice",
  age: 30,
});

// Observando múltiplas propriedades de um objeto
watch(
  () => userProfile.age,
  (newAge, oldAge) => {
    console.log(`A idade mudou de ${oldAge} para ${newAge}.`);
    // Reação adequada à mudança de idade
  }
);
</script>

Observadores Profundos

Para observar mudanças profundas dentro de objetos aninhados, você pode usar a opção deep no observador:

<script setup lang="ts">
import { reactive, watch } from "vue";

const complexData = reactive({
  nested: {
    count: 0,
  },
});

watch(
  complexData,
  (newVal, oldVal) => {
    console.log("Mudança detectada no objeto complexData", newVal);
  },
  { deep: true }
);
</script>

Nota: Usar observadores profundos (deep: true) pode ter implicações de desempenho, pois o Vue precisa verificar todas as propriedades do objeto observado para detectar mudanças.

Conclusão

Observadores são ferramentas versáteis no Vue.js que ajudam a gerenciar reações complexas a mudanças em dados reativos. Eles são especialmente úteis em situações onde computadas não são suficientes ou práticas, permitindo a execução de lógica assíncrona ou dependente de múltiplos dados reativos. Com o uso correto, observadores podem significativamente aumentar a reatividade e a interatividade de suas aplicações Vue.