📊 Capítulo 06: Ciclo de Vida na Composition API

Especialização em Frontend com Vue.js

🗺️ O Ciclo de Vida do Componente Vue 3

flowchart TD
    SETUP["<script setup> (Executa no início da instanciação / Substitui beforeCreate e created)"]
    --> MOUNT["onMounted(() => { ... })\n(DOM está pronto! Ideal para APIs, Canvas, Charts)"]
    --> UPD["onUpdated(() => { ... })\n(Executa após re-renderização provocada por mudança de estado)"]
    --> UNMOUNT["onUnmounted(() => { ... })\n(Destruição do componente / Limpeza de timers e listeners)"]

    style SETUP fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style MOUNT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style UPD fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style UNMOUNT fill:#ffebee,stroke:#d32f2f,stroke-width:2px

🎯 Slide 1: onMounted para Interação com o DOM e APIs

import { onMounted, ref } from 'vue';

const dados = ref([]);

onMounted(async () => {
  dados.value = await carregarDadosDaApi();
});

🎯 Slide 2: Limpeza Crítica com onUnmounted

onMounted(() => {
  const listener = () => console.log('Resize');
  window.addEventListener('resize', listener);

  onUnmounted(() => {
    window.removeEventListener('resize', listener); // Previne Memory Leak!
  });
});

🎯 Slide 3: nextTick() para Aguardar Atualização do DOM

• Como a atualização do DOM no Vue é assíncrona, use await nextTick() caso precise medir dimensões de elementos logo após alterar um ref!