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.
📚 Gabarito e Soluções Comentadas
Gabarito Explicado ### Questão 1: Refatoração de Componentes **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Refatoração de Componentes) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criando um Composable **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Criando um Composable) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Organização de Pastas **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Organização de Pastas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Boas Práticas de Props **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Boas Práticas de Props) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.