🚀 Capítulo 12: Lifecycle - Ciclo de Vida

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que são os Hooks de Ciclo de Vida no Vue.js e saberá como usar o onMounted para executar código assim que o seu componente aparecer na tela.

---

🏢 O Cenário Prático (Seu Desafio)

Os sistemas da nave precisam ser iniciados assim que ela sai da forja! Seu desafio é usar o ciclo de vida do Vue para disparar a rotina de inicialização e ligar os motores automaticamente assim que a página terminar de carregar!

---

🧠 Fundamentos: A Teoria Traduzida

Todo componente no Vue passa por um ciclo: ele é criado, aparece na tela (montado), é atualizado quando os dados mudam, e finalmente é destruído quando saímos da página.

Nós podemos “enganchar” (Hook) código em qualquer um desses momentos. Os mais comuns são:

1. onMounted(): Roda uma vez, logo após o componente aparecer na tela. É o melhor lugar para buscar dados de APIs ou iniciar timers.
2. onUnmounted(): Roda quando o componente deixa de existir na tela. Serve para limpar coisas da memória (como parar um relógio).

---

📖 Exemplo Guiado: Inicialização dos Motores

Vamos usar o onMounted para simular o carregamento do sistema.

🛠️ Passo a Passo

Abra o arquivo src/App.vue e altere o código:

<template>
  <div>
    <h1>🛸 Sistemas de Vôo</h1>
    <p>Status: **{{ status }}**</p>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'; // 1. Importamos o onMounted
 
const status = ref('Desligado');
 
// 2. Usamos o hook
onMounted(() => {
  console.log('Componente montado na tela!');
  status.value = 'Iniciando sistemas... Motores Ligados! 🔥';
});
</script>

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Note que você nem vê a palavra “Desligado”. O sistema já aparece como “Motores Ligados!” porque o onMounted roda muito rápido logo após o carregamento inicial!

---

🛠️ Prática Obrigatória 1

Adicione um alert('Sistemas Verificados!') dentro do seu onMounted para ter certeza de que ele está executando.

---

🛠️ Prática Obrigatória 2

Use a função do JavaScript setTimeout(() => { ... }, 3000) dentro do onMounted para fazer o status mudar para “Pronto para decolar” após 3 segundos do carregamento da página.

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

onMounted(() => {
  status.value = 'Iniciando sistemas...';
  
  setTimeout(() => {
    status.value = 'Pronto para decolar! 🚀';
  }, 3000);
});

---

← Capitulo Anterior | Proximo Capitulo →