Single File Components é um modelo onde adicionamos a estrutura(html) a lógica(javascript) e o estilo(css) em uma única página.
Exemplo de um Single File Components.
<template>
<p class="red-bold">{{ msg}}</p>
</template>
<script>
export default {
data() {
return {
msg: 'Single-File Components'
}
}
}
</script>
<style>
.red-bold {
color: red;
font-weight: bold;
}
</style>
Utilizamos Single File Components ou separamos em pastas?
Nós desenvolvedores devemos sempre prezar pela melhoria do nosso código e da forma como vamos dar a sua devida manutenção. Quando separamos nossa arquitetura front end em pastas ou seja separamos o HTML do CSS e JAVASCRIPT, conforme o tamanho e a complexidade da aplicação a manutenção destes códigos terão um impacto de tempo.
No desenvolvimento de UI moderno, foi afirmado que em vez de dividir a base de código em três camadas enormes que se entrelaçam, faz muito mais sentido dividi-las em componentes. Dentro de um componente, seu modelo, lógica e estilos são inerentemente acoplados, e colocá-los na verdade torna o componente mais coeso e sustentável.
Observe que, mesmo que você não goste da ideia de componentes de arquivo único, você ainda pode aproveitar seus recursos de pré-compilação separando seu JavaScript e CSS em arquivos separados usando Src Imports.
Benefícios em utilizar Single File Components SFC:
- Criação de componentes modulares usando a sintaxe familiar de HTML, CSS e JavaScript
- Modelos pré-compilados
- CSS com escopo de componente
- Sintaxe mais otimizada ao trabalhar com a API de composição
- Mais otimizações de tempo de compilação por meio de análise cruzada de modelo e script
- Suporte IDE com preenchimento automático e verificação de tipo para expressões de modelo
- Suporte de substituição de módulo a quente (HMR) pronto para uso
- O SFC é um recurso definidor do Vue como uma estrutura e é a abordagem recomendada para usar o Vue nos seguintes cenários:
- Aplicativos de página única (SPA)
- Geração de Site Estático (SSG)
- Experiência de desenvolvimento (DX).
RESUMÃO:
O padrão de desenvolvimento Single File Components trás muitos benefícios para aplicações devido a agilidade na hora da manutenção de suas páginas. Quando separamos em pasta o tempo de manutenção aumenta e acaba não sendo sustentável.
Top comments (1)
muito interessante