Skip to content

Latest commit

 

History

History
59 lines (41 loc) · 2.01 KB

README.md

File metadata and controls

59 lines (41 loc) · 2.01 KB
Raw

Boas práticas do Vue.js

Uma lista de melhores práticas e guias de estilo para usar no VueJs.

Os pontos abaixo são alguns deles relacionados à funcionalidade / otimização, outros são convenções de nomenclatura e ordem de elementos do VueJs.

1. Sempre use kebab-case para nomes de eventos personalizados

  • Por quê?
    • Porque os eventos serão transformados automaticamente em kebab-case. Nós nunca vamos estar ouvindo um evento em camelCase ou PascalCase, portanto, faz mais sentido declarar o evento da mesma maneira que vamos ouvi-lo: no caso do 'kebab case'.
this.$emit('meu-evento');
v-on:meu-evento //Ouvindo o evento;

2. Sempre use chaves em loops v-for

  • Por quê?
    • É uma prática recomendada comum sempre adicionar uma :key aos loops de seu modelo. Uma chave v-for sem :key pode levar a erros difíceis de encontrar, especialmente com animações.

3. Use PascalCase ou kebab-case para componentes de arquivo único

  • Por quê?
    • O PascalCase tem uma melhor integração com os editores e permite uma melhor funcionalidade de preenchimento automático / importação entre os IDEs comumente usados. -O caso do kebab é o caminho a percorrer se quisermos evitar problemas com sistemas de arquivos que não diferenciam maiúsculas de minúsculas.

4. Nunca use v-if no mesmo elemento que v-for

  • Por quê?
    • Este é um assassino de desempenho, quanto maior a lista, mais desempenho sofrerá com essa prática ruim.

5. Nome de props devem sempre usar camelCase na sua declaração, mas kebab-case, nos templates e JSX.

Mau exemplo:

props: {
  'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>

Bom exemplo:

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

Referências