Aula 13 – Boas Práticas e Arquitetura 🏰

Escrever código que funciona é apenas o primeiro passo. Como desenvolvedores profissionais, nosso objetivo é escrever código que seja fácil de ler, testar e manter.

---

🏛️ Separação de Responsabilidades

Um erro comum é colocar muita lógica dentro do componente (.vue). Siga a regra de ouro: Componentes devem apenas exibir dados e emitir eventos.

Camada	Função	Exemplo
Views	Páginas principais	HomeView.vue
Components	Peças reutilizáveis	BaseButton.vue
Stores	Estado Compartilhado	userStore.js
Services	Comunicação Externa	authService.js
Utils	Funções Auxiliares	formatDate.js

---

🧼 Clean Code no Vue

1. Nomes de Componentes: Use sempre pelo menos duas palavras para evitar conflitos com tags HTML (ex: UserCard em vez de Card).
2. Props Tipadas: Sempre valide suas props.
3. Composição over Mixins: No Vue 3, prefira extrair lógica repetida para Composables (useAlgo.js).
4. Emits Declarados: Use defineEmits para documentar o que o componente faz.

---

📊 Estrutura de Composable

graph LR
    A[Lógica Repetida] --> B[useCounter.js]
    B --> C[Componente A]
    B --> D[Componente B]
    B --> E[Componente C]

Exemplo de um Composable simples:

// src/composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

---

🧠 Padrão de Nomenclatura

Dica de Ouro

Componentes que são usados apenas uma vez (como Header, Footer) devem ter o prefixo The (ex: TheNavbar.vue). Componentes reutilizáveis devem ter prefixos como Base, App ou V (ex: BaseButton.vue).

---

📝 Exercício

1. Qual a vantagem de usar Composables em vez de colocar toda a lógica no componente?
2. Refatore um componente seu que tenha mais de 100 linhas de lógica para usar um Composable ou um Service.
3. Por que devemos evitar nomes de uma única palavra para componentes?

🚀 Próxima Aula: Vamos deixar nossa aplicação bonita e responsiva com Scoped CSS e Tailwind!