Observadores (Watchers) - 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:

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