🚀 Capítulo 08: Computed - Cálculos da Nave
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que são as Propriedades Computadas (computed) no Vue.js e saberá como usá-las para fazer cálculos automáticos que ficam guardados na memória para economizar processamento.
🏢 O Cenário Prático (Seu Desafio)
O computador de bordo da sua nave precisa calcular a Autonomia de Vôo (quantos quilômetros você ainda pode percorrer). O cálculo depende do combustível atual. Seu desafio é usar o computed para fazer essa conta e atualizar o painel automaticamente!
🧠 Fundamentos: A Teoria Traduzida
Às vezes, precisamos mostrar na tela um dado que depende de outro. Por exemplo, se temos o preco e a quantidade, queremos mostrar o total.
Poderíamos fazer a conta direto no HTML: {{ preco * quantidade }}. Mas se a conta for grande, o HTML fica feio e pesado.
A função computed() serve para isso:
- Ela cria uma variável que calcula um valor baseado em outras variáveis reativas.
- Cache: Ela é muito rápida porque guarda o resultado na memória. O Vue só faz a conta de novo se as variáveis que estão dentro dela mudarem!
📖 Exemplo Guiado: Calculando a Autonomia
Vamos calcular o alcance da nave.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e altere o código:
<template>
<div>
<h1>🚀 Computador de Bordo</h1>
<p>Combustível: **{{ combustivel }} litros**</p>
<!-- Chamamos o computed como se fosse uma variável comum -->
<p>Autonomia Estimada: **{{ autonomia }} km**</p>
<button @click="combustivel += 10">Abastecer</button>
<button @click="combustivel -= 10">Gastar Combustível</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'; // 1. Importamos o computed
const combustivel = ref(50);
// 2. Criamos a propriedade computada
const autonomia = computed(() => {
// Regra: cada litro dá para andar 12 km
return combustivel.value * 12;
});
</script>🕹️ Como Executar e Testar no VS Code
- Salve e veja o navegador.
- Clique nos botões. Veja que a autonomia muda sozinha e instantaneamente quando você mexe no combustível!
🛠️ Prática Obrigatória 1
Crie um novo valor computado chamado statusTanque. Se o combustível for menor que 20, deve retornar a frase ”🚨 ALERTA: Combustível Baixo!“. Se não, deve retornar ”✅ Nível Seguro”. Exiba essa frase na tela.
🛠️ Prática Obrigatória 2
Use o :class do Capítulo 6 para fazer o texto do statusTanque ficar vermelho quando o combustível estiver baixo.
🔑 Gabarito de Código/Fórmulas
Prática 1:
const statusTanque = computed(() => {
return combustivel.value < 20 ? '🚨 ALERTA: Combustível Baixo!' : '✅ Nível Seguro';
});