Vue.js

# Componentes de un Solo Archivo

Aprender sobre componentes de un solo archivo con una lección de vídeo gratis en Vue School

# Introducción

Componentes de un Solo Archivo de Vue (también conocido como archivos *.vue, abreviado como SFC) es un formato especial que nos permite encapsular las plantillas, lógica, y estilos de un componente Vue en un solo archivo. Aquí es un ejemplo de SFC:

<script>
export default {
  data() {
    return {
      greeting: '¡Hola Mundo!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Como podemos ver, Vue SFC es un extensión natural de trío clasical de HTML, CSS y JavaScript. Cada archivo *.vue consiste en tres tipos de bloques de lenguaje de nivel superior: <template>, <script>, y <style>:

  • La sección <script> es una módulo estándar de JavaScript. Debería exportar una definición de componente Vue como su exportación por defecto.
  • La sección <template> define la plantilla del componente.
  • La sección <style> define estilos(CSS) asociados con el componente.

Consulte más detalles en el Especificación del Sintaxis de SFC.

# Como funciona

Vue SFC es un formato específico del framework y debe ser compilado antes de mano por @vue/compiler-sfc (opens new window) a JavaScript y CSS estándares. Un SFC compilado es un módulo estándar de JavaScript (ES) - lo que significa que con paso adecuado de construcción puede importar un SFC como un módulo:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
1
2
3
4
5
6
7

Las etiquetas <style> dentro de SFCs son típicamente inyectados como etiquetas nativas de <style> durante desarrollo para soportar actualizaciones en tiempo(hot update). Para producción pueden ser extraido y fusionado a un archivo único de CSS.

Puede jugar con los SFCs y explorar como son compilado en el Patio de Recreo de Vue SFC (opens new window).

En proyectos actuales, típicamente integramos el compilador de SFC con una herramienta de construcción como Vite (opens new window) o Vue CLI (opens new window) (lo cual es basado en webpack (opens new window)), y Vue proporciona herramientas oficales de andamiaje para ayudarle empezar con los SFCs lo antes posible. Consulte más detalles en la sección Herramientas de SFC.

# Por qué SFC

Mientras los SFCs requieren un paso de construcción, hay numerosos beneficos a cambio:

El SFC es una característica típica de Vue como un framework, y es el enfoque recomendado para utilizar Vue en los escenarios a continuación:

  • Aplicación de una sola página (SPA)
  • Generación de sitios estáticos (SSG)
  • Cualquier frontend no trivial donde un paso de construcción es considerado mejor para la experiencia de desarrollo (DX).

Dicho esto, realizamos que hay escenarios donde los SFCs pueden ser excesos. Es porque Vue puede también utilizado mediante JavaScript plano sin un paso de construcción. Si solo está buscando mejorar HTML estático en gran medida con interacciones livianos, puede consultar también petite-vue (opens new window), un subconjunto de Vue de solo 5kb, optimizado para mejoramientos progresivos.

# ¿Qué hay de separación de responsabilidades?

Unos usuarios vienen de un fondo tradicional del desarrollo web pueden llevar la preocupación de que los SFCs están mezclando distintos intereses en el mismo lugar - de lo cual HTML/CSS/JS se suponían de separarse!

Para responder esta pregunta, es importante para nosotros acodar que separación de responsabilidades no es igual a separación de tipos de archivo. El último objetivo de principios de ingeniería es mejorar la mantenibilidad del base de código. Separación de responsabilidades, una vez que sea aplicado como separación de tipos de archivo, no nos ayuda a alcanzar el objetivo en el context de frontend aplicaciones con más y más complejidad.

En el desarrollo de interfaz de usuario moderno, hemos encontrado que en vez de separar la base de código en tres grandes capas que entretejen entre sí, tiene más sentido dividirlos en componentes débilmente acoplados y los componemos. Dentro de un componente, su plantilla, lógica y estilos son acoplados inherentemente, y colocarlos de hecho hace que el componente más cohesivo y mantenible.

Note que aunque no le gusta el idea de Componentes de un Solo Archivo, puede todavía aprovechar sus características de hot-reloading y pre-compilation mediante separar su JavaScript y CSS en archivos separados utilizando Src Imports.

← Pruebas →