Victor Marques
A web developer currently doing Ruby on Rails and Vue.js
Arquitetura de componentes com
Vue.js
Victor Marques
@victor-am
linkedin.com/in/victor-am
@victoratmorning
Como construir uma boa arquitetura
usando Vue.js
Mas antes,
dois avisos
1.
Estou presumindo que você já usou Vue.js
2.
Estou me baseando na minha experiência, então não entendam nada aqui como a verdade absoluta
Quando separamos nossa interface em pequenos componentes pagamos um preço:
Agora estes componentes precisam se comunicar
E a interface pública dos componentes em Vue são os
Props e os Eventos
Eventos
Eventos são como os componentes "filhos"
se comunicam com o componente "pai"
Prefira eventos declarativos
do que
imperativos
Componente pai
Componente filho
Filhos não dão
ordens aos pais
Um truque para lembrar:
Dar nomes de uma forma diferente vai ajudar a pensar na sua arquitetura de uma forma diferente
Nomes bons
modal-close | fechar-modal post-save | salvar-post upload-finish | terminar-upload close* | fechar posts-reload | recarregar-posts value-change | alterar-valor
on
on
on
on
on
on
ao
ao
ao
ao
ao
ao
Nomes ruins
close-modal | feche-o-modal
save-post | salve-o-post
finish-upload | termine-o-upload
close* | feche
reload-posts | recarregue-os-posts
change-value | altere-o-valor
on
on
on
on
on
on
ao
ao
ao
ao
ao
ao
Referência:
pablohpsilva/vuejs-component-style-guide
Props
Especifique os tipos dos props e se são obrigatórios
Você ganha uma API mais clara para quem for usar este componente no futuro
Evita bugs difíceis de debugar causados por dados inesperados sendo passados para um componente
Evite o "watch"
(se possível)
Quase sempre tem uma forma mais "vue way™" de fazer a mesma coisa (usando computed properties por exemplo)
Concluindo
Inserir frase de efeito
Victor Marques
@victor-am
linkedin.com/in/victor-am
@victoratmorning
Obrigado :-)
thanks Freepik for the hat and mustache vectors
Arquitetura de componentes em Vue.js
By Victor Marques
