🚀 Capítulo 09: Watchers - Sensores
🎯 Objetivo da Aula
Ao final desta aula, você saberá como usar os Observadores (watch) no Vue.js para “viciar” uma variável e executar uma ação (como um alerta ou salvar dados) toda vez que o valor dela mudar.
🏢 O Cenário Prático (Seu Desafio)
Os sensores de proximidade da nave precisam avisar o piloto quando um caça inimigo chegar muito perto! Seu desafio é criar um observador que fique vigiando a distância do inimigo. Se ela for menor que 500 metros, o sistema deve disparar um alarme!
🧠 Fundamentos: A Teoria Traduzida
No capítulo anterior, usamos o computed para calcular novos valores. Já o watch() serve para executar ações (efeitos colaterais) quando algo muda.
- Exemplo: Salvar dados no banco, tocar um som de alerta, ou buscar dados na internet quando o usuário muda uma opção.
Sintaxe:
watch(variavelQueQueroVigiar, (novoValor, valorAntigo) => {
// O código que roda quando a variável muda
});📖 Exemplo Guiado: Sensor de Colisão
Vamos monitorar a distância do inimigo.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e altere o código:
<template>
<div>
<h1>📡 Sensores de Proximidade</h1>
<p>Distância do Inimigo: **{{ distancia }} metros**</p>
<button @click="distancia -= 100">Aproximar Nave</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'; // 1. Importamos o watch
const distancia = ref(1000);
// 2. Criamos o observador
watch(distancia, (novaDistancia) => {
if (novaDistancia <= 500) {
alert('🚨 CUIDADO: Inimigo muito próximo!');
}
});
</script>🕹️ Como Executar e Testar no VS Code
- Salve e veja o navegador.
- Clique no botão algumas vezes até a distância cair para 500 ou menos.
- O alerta do navegador vai subir avisando do perigo!
🛠️ Prática Obrigatória 1
O watch também nos dá o valor antigo da variável. Modifique o código para que, além do alerta, ele mostre no console uma mensagem dizendo: “A distância mudou de [valorAntigo] para [novoValor]“.
🛠️ Prática Obrigatória 2
Crie uma variável chamada velocidade e use o watch para gravar o valor dela no localStorage do navegador toda vez que ela mudar.
Dica: localStorage.setItem('velocidade', novaVelocidade);
🔑 Gabarito de Código/Fórmulas
Prática 1:
watch(distancia, (novo, antigo) => {
console.log(`A distância mudou de ${antigo} para ${novo}`);
if (novo <= 500) {
alert('🚨 CUIDADO: Inimigo muito próximo!');
}
});