Vue.js

# Componentes Single-File

Aprenda sobre componentes single-file com uma vídeo aula gratuita na Vue School

# Introdução

Componentes Single-File do Vue (também conhecido como arquivos *.vue, abreviado como SFC) é um formato de arquivo especial que nos permite encapsular o template, lógica e estilização de um componente Vue em um único arquivo. Aqui está um exemplo de SFC:

<script>
export default {
  data() {
    return {
      greeting: 'Olá 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, SFC no Vue é uma extensão natural do trio clássico de HTML, CSS e JavaScript. Cada arquivo *.vue consiste em três tipos de blocos de linguagem de nível superior: <template>, <script> e <style>:

  • A seção <script> é um módulo JavaScript padrão. Ele deve exportar uma definição de componente Vue como sua exportação padrão.
  • A seção <template> define o template (árvore HTML) do componente.
  • A seção <style> define o CSS associado ao componente.

Verifique mais detalhes na Especificação da sintaxe SFC.

# Como funciona

Vue SFC é um formato de arquivo específico do framework e deve ser pré-compilado por @vue/compiler-sfc (opens new window) em JavaScript e CSS padrão. Um SFC compilado é um módulo JavaScript (ES) padrão - o que significa que, com a configuração de compilação adequada, você pode importar um SFC como um módulo:

import MyComponent from './MyComponent.vue'

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

As tags <style> dentro de SFCs são normalmente injetadas como tags <style> nativas durante o desenvolvimento para suportar hot updates. Para produção, elas podem ser extraídas e mescladas em um único arquivo CSS.

Você pode brincar com SFCs e explorar como eles são compilados no Vue SFC Playground (opens new window).

Em projetos reais, normalmente integramos o compilador SFC com uma ferramenta de construção como Vite (opens new window) ou Vue CLI (opens new window) (que é baseada no webpack (opens new window)), e o Vue fornece ferramentas oficiais de scaffolding para você começar com SFCs o mais rápido possível. Confira mais detalhes na seção Ferramentas SFC.

# Por que SFC

Embora os SFCs exijam uma etapa de compilação, há vários benefícios em troca:

O SFC é um recurso definidor do Vue como um framework 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)
  • Quaisquer frontends não triviais em que uma etapa de compilação possa ser justificada para uma melhor experiência de desenvolvimento (DX).

Dito isso, percebemos que existem cenários em que os SFCs podem parecer um exagero. É por isso que o Vue ainda pode ser usado via JavaScript simples sem uma etapa de compilação. Se você está apenas procurando aprimorar HTML amplamente estático com interações leves, também pode conferir petite-vue (opens new window), um subconjunto de 6kb do Vue otimizado para aprimoramento progressivo.

# E Quanto à Separação de Preocupações?

Alguns usuários vindos de um background tradicional de desenvolvimento web podem ter a preocupação de que os SFCs estejam misturando diferentes preocupações no mesmo lugar - que HTML/CSS/JS deveriam se separar!

Para responder a essa pergunta, é importante concordarmos que a separação de preocupações não é igual à separação de tipos de arquivos. O objetivo final dos princípios de engenharia é melhorar a manutenibilidade das bases de código. A separação de preocupações, quando aplicada dogmaticamente como separação de tipos de arquivos, não nos ajuda a atingir esse objetivo no contexto de aplicativos frontend cada vez mais complexos.

No desenvolvimento de UI moderno, descobrimos 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 fracamente acoplados e compô-los. Dentro de um componente, seu template, lógica e estilos são inerentemente acoplados, e colocá-los juntos na verdade torna o componente mais coeso e sustentável.

Observe que mesmo que você não goste da ideia de Componentes Single-File, você ainda pode aproveitar seus recursos de pré-compilação e hot-reloading separando seu JavaScript e CSS em arquivos separados usando Src Imports.

← Testando →