Observadores (Watchers) no Vue.js

Além das propriedades computadas, o Vue.js permite a definição de observadores, conhecidas como watchers. Essas propriedades são amplamente utilizadas para executar ações assíncronas, especialmente aquelas que podem levar mais tempo, como o envio de solicitações para servidores.

Considere o exemplo abaixo de uma página web:

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo Assíncrono com Vue.js</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <p>Insira sua idade: <input v-model="age" /></p>
      <p>{{ result }}</p>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            age: "",
            result: "",
          };
        },
        watch: {
          age: async function (newAge) {
            if (newAge > 0 && newAge < 110) {
              this.result = "Verificando sua idade...";
              try {
                const response = await this.validateAge(newAge);
                this.result = response;
              } catch (error) {
                this.result = "Erro ao validar a idade: " + error.message;
              }
            } else {
              this.result = "Idade inválida. Por favor, insira um valor entre 1 e 110.";
            }
          },
        },
        methods: {
          async validateAge(age) {
            // Simula uma chamada a um servidor com tempo de resposta de 2 segundos
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                if (age >= 18) {
                  resolve("Acesso permitido");
                } else {
                  resolve("Acesso negado para menores de 18 anos.");
                }
              }, 2000);
            });
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

No código acima, o parâmetro watch define um observador para a propriedade age, monitorando seu valor declarado na seção data. Sempre que o valor de age é alterado, a função associada ao watcher é executada, recebendo o novo valor por meio do parâmetro newAge.

A função vinculada ao watcher verifica se o novo valor está dentro de uma faixa válida antes de chamar o método validateAge. Este método é responsável por simular uma validação assíncrona, retornando uma promise que resolve após 2 segundos. Durante o período de espera, a propriedade result exibe a mensagem "Verificando sua idade..." para indicar que a validação está em andamento. Assim que a validação é concluída, o método atualiza a propriedade result com a mensagem apropriada, baseada na idade inserida.

Quando o valor no campo de texto é alterado, o sistema exibe primeiro a mensagem de carregamento:

Exemplo de Observadores em Vue.js

Após 2 segundos, a mensagem é atualizada com o resultado da validação da idade inserida:

O uso de Watchers em Vue.js

Documentação oficial:

Observadores