🚀 Capítulo 04: ref e reactive - A Força Flui
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o conceito de Reatividade no Vue 3 e saberá como usar a função ref() para fazer com que a sua tela se atualize automaticamente quando um dado mudar.
🏢 O Cenário Prático (Seu Desafio)
Uma nave parada não ganha batalhas! Seu desafio hoje é criar o controle de Velocidade da Nave. Você precisará de um botão para acelerar e ver o número da velocidade subir na tela em tempo real!
🧠 Fundamentos: A Teoria Traduzida
No capítulo 2, usamos variáveis comuns. Mas no Vue, se você mudar o valor de uma variável comum, ele não redesenha a tela. Para que a tela atualize, a variável precisa ser Reativa.
O que é o ref()?
É uma função do Vue que serve para criar uma variável reativa.
- Como usar no Script: Para criar:
const valor = ref(0);. Para mudar o valor:valor.value = 10;(você PRECISA usar o.valuedentro do script). - Como usar no Template: No HTML você usa direto:
{{ valor }}, sem precisar do.value!
📖 Exemplo Guiado: Controle de Velocidade
Vamos criar o velocímetro.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e altere o código:
<template>
<div>
<h1>🚀 Velocímetro da Nave</h1>
<p>Velocidade Atual: **{{ velocidade }} km/h**</p>
<button @click="acelerar">Acelerar</button>
</div>
</template>
<script setup>
import { ref } from 'vue'; // 1. Importamos o ref
// 2. Criamos a variável reativa começando em 0
const velocidade = ref(0);
function acelerar() {
// 3. No script, usamos .value para mudar o valor
velocidade.value += 10;
}
</script>🕹️ Como Executar e Testar no VS Code
- Salve o arquivo e veja o navegador.
- Clique no botão “Acelerar” e veja o número mudar na tela instantaneamente!
🛠️ Prática Obrigatória 1
Crie um segundo botão chamado “Frear” que diminui a velocidade em 10 a cada clique.
🛠️ Prática Obrigatória 2
Melhore a função de frear para que a velocidade nunca fique menor que zero. Dica: use um if (velocidade.value > 0).
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No <template>:
<button @click="frear">Frear</button>No <script setup>:
function frear() {
if (velocidade.value > 0) {
velocidade.value -= 10;
}
}