Entrar Ainda não tem acesso?
1
resposta

Boas práticas em Vue 3

Referente ao curso Vue3: composition API e Vuex, no capítulo Toques finais e atividade Parabéns

por Thatyane Gama Carvalho
| 42k xp | 1 posts
Full Stack Software Developer

Olá. Assistindo as aulas me surgiram algumas dúvidas.

  1. Por que utilizar :class para apresentar ou não o modal e não v-if ou v-show?

  2. No Vue 2, podíamos passar props via componentes e todas elas eram automaticamente reativas. Eu aprendi recentemente a fazer a utilização de toRef (ou, geramlente, toRefs) + ref + v-bind para passar props em Vue 3. E neste curso aprendemos a utilizar vuex com states e até mesmo Proxy. O fato é que, em Vue 2, a utilização de props e o trabalho com componentização e reatividade era muito mais rápido e prático para o desenvolvedor. Qual seria a melhor prática com vue 3 então?

Aceito outras dicas de boas práticas também =D Obrigada

1 resposta
por Renan Lima
| 3622.7k xp | 7632 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Thatyane.

Tudo bem?

\muito obrigado por compartilar as suas dúvidas aqui com a gente. Vamos às suas dúvidas:

  1. 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.

  2. 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!