Olá, Thatyane.
Tudo bem?
\muito obrigado por compartilar as suas dúvidas aqui com a gente. Vamos às suas dúvidas:
Por que utilizar :class para apresentar ou não o modal e não v-if ou v-show?
Utilizar :class para controlar a visibilidade de um modal pode ser uma escolha baseada em como você deseja manipular o DOM e o desempenho da aplicação. Aqui estão algumas diferenças:
v-if: Adiciona ou remove completamente o elemento do DOM. Pode ser mais custoso em termos de desempenho se o elemento tiver uma renderização complexa, pois cada vez que a condição muda, o elemento é recriado.v-show: Apenas altera a propriedade display do CSS, mantendo o elemento no DOM. É mais eficiente se a troca de visibilidade for frequente, mas o elemento ainda consome recursos enquanto está oculto.:class: Pode ser usado para adicionar ou remover classes que controlam a visibilidade via CSS. Isso pode ser útil se você deseja aplicar animações ou transições de forma mais flexível.
Melhor prática para passar props e reatividade no Vue 3:
No Vue 3, a Composition API oferece mais flexibilidade e controle sobre a reatividade, mas pode parecer mais verbosa em comparação com a API de Options do Vue 2. Aqui estão algumas práticas recomendadas:
- Uso de
toRefs e toRef: Quando você deseja passar um objeto reativo ou um único ref como props, toRefs pode ser útil para desestruturar o objeto mantendo a reatividade. - Uso de
reactive e ref: Utilize reactive para criar objetos reativos e ref para valores primitivos. Isso ajuda a manter a consistência e a previsibilidade do estado reativo. - Vuex e Proxy: Vuex continua sendo uma excelente escolha para gerenciamento de estado global. O uso de Proxy pode ser útil para criar estados reativos complexos e personalizados.
Espero ter ajudado de alguma forma. Qualquer dúvida pode mandar aqui de novo. Bons estudos!
