Exercícios: Aula 13 - Boas Práticas e Arquitetura 🏛️

1. Refatoração de Componentes

Pegue um componente que você criou nos exercícios anteriores que possua mais de 100 linhas. Tente identificar uma parte da interface que se repete ou que possui uma lógica independente e extraia-a para um novo componente menor. Quais os ganhos obtidos?

2. Criando um Composable

Crie um Composable chamado useToggle.js. - Ele deve retornar uma variável reativa isOpen (boolean) e uma função toggle que inverta esse valor. - Importe e use esse composable em dois componentes diferentes para controlar a visibilidade de um modal ou menu.

3. Organização de Pastas

Descreva como você organizaria as pastas de um projeto Vue que possui: - 20 Componentes globais (botão, input, etc). - 5 Páginas principais. - 3 Stores do Pinia. - 10 Ícones SVG. - 1 arquivo de configuração de rotas.

4. Boas Práticas de Props

Por que não devemos alterar o valor de uma Prop diretamente dentro do componente filho? Se precisarmos mudar esse valor, qual técnica (padrão) devemos seguir?

5. Desafio: Documentação de Componente

Escolha o componente mais complexo que você criou neste curso. Escreva um pequeno arquivo README.md (dentro da pasta do componente) explicando quais Props ele recebe, quais Eventos ele emite e qual a sua responsabilidade principal.