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