📊 Capítulo 01: Ecossistema Vue 3 & Composition API

Especialização em Frontend com Vue.js

🗺️ A Anatomia do Single File Component (SFC) com <script setup>

flowchart TD
    SFC[".vue Single File Component"]
    --> SCRIPT["<script setup lang='ts'>\n(Lógica reativa limpa / Sem boilerplates / TypeScript nativo)"]
    SFC --> TEMPLATE["<template>\n(HTML declarativo com interpolação e diretivas v-*)"]
    SFC --> STYLE["<style scoped>\n(CSS isolado exclusivamente no componente via PostCSS)"]
    SFC --> VITE["Vite Compiler (Compilação On-Demand via Rolldown/esbuild / HMR < 50ms!)"]

    style SFC fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SCRIPT fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style TEMPLATE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style STYLE fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style VITE fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

🎯 Slide 1: Options API vs Composition API

• Options API (Legado Vue 2): Código fragmentado por seções (data, methods, computed, mounted). Em componentes com mais de 300 linhas, uma única funcionalidade fica espalhada por 4 lugares diferentes.

• Composition API (Vue 3 Moderno): Agrupamento lógico por funcionalidade (Feature-Based), reusabilidade via Composables e tipagem estrita com TypeScript!

🎯 Slide 2: O Poder do <script setup>

<script setup lang="ts">
import { ref } from 'vue';

const contador = ref(0);
const incrementar = () => contador.value++;
</script>

<template>
  <button @click="incrementar">Cliques: {{ contador }}</button>
</template>

• Variáveis e imports declarados ficam automaticamente disponíveis no template sem precisar retornar nenhum objeto!

🎯 Slide 3: O Build System com Vite

• Inicia o servidor em milissegundos servindo módulos ESM nativos direto para o navegador, sem empacotar a aplicação inteira na largada!