Capítulo 01: Ecossistema Vue 3, Vite, SFCs (.vue) e Composition API

Capítulo 01: Ecossistema Vue 3, Vite, SFCs (.vue) e Composition API

Especialização em Front-End com Vue • Vue 3 & Nuxt 3 • Composition API, Pinia, Vue Router, SSR e TypeScript

---

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    A["Vite Dev Server (ES Modules Nativos)"] --> B["Compilador SFC (@vue/compiler-sfc)"]
    B --> C["<template> -> Render Function Otimizada"]
    B --> D["<script setup lang='ts'> -> Setup Scope"]
    B --> E["<style scoped> -> CSS com Atributos Hash"]
    C & D & E --> F["Virtual DOM com Patch Flags"]
    F --> G["Renderização Ultra-Rápida no Navegador"]

    subgraph ECO["Ecossistema Vue 3 Moderno"]
        H["Composition API (<script setup>)"]
        I["TypeScript de Primeira Classe"]
        J["Pinia (Estado)"]
        K["Vue Router 4 (Rotas)"]
        L["Vitest (Testes Unitários)"]
    end

    F --> ECO

    style A fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style B fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style F fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style ECO fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px

---

🏛️ 1. Fundamentos Técnicos & Arquitetura do Vue 3

O Vue.js 3 representa uma reescrita arquitetural completa do framework, projetada do zero em TypeScript para proporcionar performance incomparável, modularidade de pacotes (monorepo monólito-livre) e máxima expressividade com a Composition API.

1.1 Do Webpack ao Vite (Desenvolvimento Instantâneo)

No paradigma anterior (Vue 2 com Webpack), toda a árvore de dependências da aplicação precisava ser agrupada (bundled) antes de subir o servidor local. Com o Vite, os navegadores modernos consomem módulos nativos via ESM (Native ES Modules):

• Zero Bundling em Desenvolvimento: O servidor HTTP inicia instantaneamente (< 200ms), compilando apenas o arquivo .vue requisitado no momento da navegação.
• Hot Module Replacement (HMR) Baseado em ESM: Apenas o componente modificado é reenviado ao navegador, mantendo o estado reativo da aplicação intacto.
• Rollup em Produção: Na etapa de build corporativo, o Vite orquestra o Rollup gerando bundles altamente divididos (code-splitting) e otimizados com tree-shaking agressivo.

1.2 Anatomia Canônica do Single File Component (SFC)

O arquivo .vue consolida os três pilares da interface do usuário em um único artefato coeso:

1. <script setup lang="ts">: O ponto de entrada executável. É compilado diretamente dentro do escopo da função setup(), eliminando chamadas repetitivas de return { ... }.
2. <template>: O layout declarativo compilado em funções de renderização JavaScript puras.
3. <style scoped>: Regras CSS isoladas no escopo do componente através de atributos estáticos injetados pelo compilador (data-v-[hash]).

1.3 Otimizações de Compilação (Patch Flags e Hoisting)

O compilador de templates do Vue 3 analisa o HTML em tempo de compilação estática:

• Static Hoisting: Elementos estáticos sem interpolação de variáveis são elevados para fora da função render(), sendo alocados em memória apenas uma única vez na inicialização.
• Patch Flags: Nós que possuem ligações dinâmicas recebem números de bitmask (bitwise flags) como 1 /* TEXT */ ou 8 /* PROPS */. Durante a reconciliação do Virtual DOM, o runtime ignora árvores estáticas e salta diretamente para os nós mutáveis.

---

⚖️ 2. Tabela Comparativa: Options API vs Composition API

Dimensão Técnica	Options API (Legado Vue 2)	Composition API com <script setup> (Padrão Ouro Vue 3)
Organização do Código	Fragmentada por opções (data, methods, computed, watch).	Agrupada logicamente por Recurso de Negócio / Composable.
Integração com TypeScript	Complexa; exige inferência pesada através do objeto this.	Nativa e Direta; variáveis, tipos e retornos são tipados diretamente.
Reaproveitamento de Lógica	Mixins (propensão a conflito de nomes e origem opaca de propriedades).	Custom Composables tipados, com contratos explícitos e sem colisões.
Tamanho do Bundle (Tree-shaking)	Menor eficiência; as opções precisam ser incluídas no runtime.	Máxima eficiência; funções não utilizadas são descartadas no build.
Curva de Aprendizado	Estrutura rígida e guiada; mais fácil para iniciantes sem JS moderno.	Exige familiaridade com closures, reatividade reativa e tipagem estrita.

---

⚠️ 3. Armadilhas Comuns em Produção (Gotchas & Anti-Patterns)

Anti-Pattern 1: Retornar Propriedades sem <script setup> com Overhead de Boilerplate

Erro Comum: Em projetos Vue 3 novos, desenvolvedores continuam exportando defineComponent({ setup() { return { ... } } }). Esse estilo exige duplicar cada variável no objeto de retorno. Abordagem Correta: Adotar <script setup lang="ts">. Todas as declarações de nível superior (top-level) ficam automaticamente acessíveis no <template>.

Anti-Pattern 2: Acessar this dentro de <script setup>

Erro Comum: Tentar invocar this.$router ou this.meuMetodo(). Abordagem Correta: Na Composition API, o contexto this é intencionalmente inexistente (undefined). Utiliza-se injeção de dependência e composables dedicados como useRouter() e useRoute().

---

💻 4. Código Conceitual Arquitetural Comentado

<!-- src/components/ClusterMonitor.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

// Definição de contrato de dados tipado estritamente
interface ClusterStatus {
  nodeName: string;
  loadAverage: number;
  isOnline: boolean;
}

// Estado local reativo via ref da Composition API
const cluster = ref<ClusterStatus>({
  nodeName: 'aws-us-east-cluster-01',
  loadAverage: 1.45,
  isOnline: true
});

// Derivação computada com auto-caching
const isOverloaded = computed<boolean>(() => {
  return cluster.value.loadAverage > 2.0;
});

// Função de ação disparada pelo evento de UI
function restartCluster(): void {
  cluster.value.isOnline = false;
  setTimeout(() => {
    cluster.value.loadAverage = 0.45;
    cluster.value.isOnline = true;
  }, 1200);
}
</script>

<template>
  <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm max-w-md">
    <div class="flex items-center justify-between">
      <h3 class="font-bold text-slate-800 text-lg">{{ cluster.nodeName }}</h3>
      <span
        :class="cluster.isOnline ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'"
        class="text-xs px-2.5 py-1 rounded-full font-bold"
      >
        {{ cluster.isOnline ? 'ONLINE' : 'RESTARTING' }}
      </span>
    </div>

    <div class="mt-4">
      <p class="text-sm text-slate-500">Carga Média Atual:</p>
      <p class="text-3xl font-extrabold text-slate-900 mt-1">
        {{ cluster.loadAverage.toFixed(2) }}
      </p>
    </div>

    <button
      :disabled="!cluster.isOnline"
      @click="restartCluster"
      class="mt-6 w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-semibold transition-colors disabled:opacity-50"
    >
      Reiniciar Instância
    </button>
  </div>
</template>

<style scoped>
/* O compilador Vue transforma esta regra em: .p-6[data-v-hash] */
</style>

---

🛠️ 5. Cheat-Sheet de Inicialização Rápida com Vite & TypeScript

# 1. Criação do projeto canônico corporativo oficial
npm create vue@latest meu-projeto-vue3

# Durante as perguntas interativas:
# ✔ Add TypeScript? ... Yes
# ✔ Add JSX Support? ... No
# ✔ Add Vue Router for Single Page Application development? ... Yes
# ✔ Add Pinia for state management? ... Yes
# ✔ Add Vitest for Unit Testing? ... Yes
# ✔ Add ESLint for code quality? ... Yes
# ✔ Add Prettier for code formatting? ... Yes

# 2. Instalação de dependências e inicialização do servidor de desenvolvimento
cd meu-projeto-vue3
npm install
npm run dev

# 3. Execução de validação de tipagem e build de produção
npm run type-check
npm run build