Vue: cómo funciona su estructura Single Files Components

El campo de los frameworks se hace más extenso con el pasar de los años. Ya son varios los disponibles para el uso de los desarrolladores, cada uno de ellos con características especiales que le hacen ser el preferido por algunos grupos, entre estos se destaca Vue.

Acorde a la definición que le dan en su página oficial, Vue es un framework de estilo progresivo ideado para crear interfaces de usuario. Uno de los aspectos principales que lo distingue de los demás frameworks monolíticos es que fue diseñado para ser adoptable de forma incremental.

Vue trabaja con una estructura de Single Files Components que lo distinguen por sobre los demás frameworks y te explicamos cómo funciona exactamente este proceso.

Así funciona la estructura Single Files Components de Vue

Una estructura Single Files Components se encarga de separar el contenido de componentes en: Markup HTML(<template>), Comportamiento (<script>) y Estilos (<style>).

Luis Lau, developer de Rootstack experto en Vue, explica cómo este framework utilizando la estructura Single Files Components se diferencia de otros frameworks similares como Angular y React.

“Se diferencia de Angular por ejemplo porque un componente existe dentro de un solo archivo, y no se segregan sus partes en múltiples archivos. Y los templates se diferencian de React porque se escriben de manera declarativa en un formato que es un superset de HTML (Es decir, todo HTML también es un template de Vue válido), y no necesariamente con JSX (aunque sí es posible utilizar JSX y otros templating engines también)".

También nos habló sobre lo configurable que son los Single Files Component, permitiéndole al desarrollador: 

• Utilizar lenguajes de templating para HTML alternativos (e.g. Pug)
• Utilizar lenguajes preprocesadores de CSS alternativos (e.g. SCSS, Stylus, Less)
• Utilizar lenguajes preprocesadores de JS alternativos (e.g. Typescript, Dart)
• Alternativamente, no utilizar <template> para uno o varios componentes, y en vez proporcionar un render function, similar a React
• Alternativamente, separar ciertas partes del SFC en otros archivos. Por ejemplo, algunos prefieren incluir estilos fuera de los SFCs