Vue.js

Appearance

Obsah stránky

Single-File komponenty (SFC) ​

Úvod ​

Vue Single-File komponenty (alias *.vue soubory, zkráceně SFC) jsou speciální formát souboru, který nám umožňuje zapouzdřit šablonu, logiku a stylování Vue komponenty do jednoho souboru. Zde je příklad SFC:

vue
<script>
export default {
  data() {
    return {
      greeting: 'Ahoj, Vue!'
    }
  }
}
</script>

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

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Ahoj, Vue!')
</script>

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

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Jak můžeme vidět, Vue SFC je přirozeným rozšířením klasické trojice HTML, CSS a JavaScriptu. Bloky <template>, <script> a <style> zapouzdřují a umisťují zobrazení, logiku a stylování komponenty do stejného souboru. Úplná syntaxe je definována ve specifikaci syntaxe SFC.

Proč používat SFC ​

I když je pro použití SFC potřeba build fáze, existuje mnoho výhod:

SFC je klíčovou vlastností Vue jako frameworku a je doporučeným přístupem pro použití Vue v následujících scénářích:

  • Single-page aplikace (SPA)
  • Statické generování stránek (SSG)
  • Jakýkoli složitější frontend, kde je možné odůvodnit využití build fáze pro lepší development experience (DX).

Navzdory dosud řečenému si uvědomujeme, že existují i případy užití, kdy se SFC mohou jevit zbytečně složité. Proto je možné Vue stále používat jen pomocí čistého JavaScriptu bez build fáze. Pokud se chcete zaměřit pouze na vylepšení převážně statického HTML s lehkými interakcemi, můžete se také podívat na petite-vue, což je 6 kB podmnožina Vue optimalizovaná pro progresivní vylepšování.

Jak to funguje ​

Vue SFC je specifický formát souboru pro framework a musí být předkompilován pomocí @vue/compiler-sfc do standardního JavaScriptu a CSS. Kompilovaná SFC je standardní JavaScriptový (ES) modul - což znamená, že s odpovídajícím nastavením buildu můžete SFC importovat jako modul:

js
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

Tagy <style> uvnitř SFC jsou během vývoje obvykle implemntovány jako nativní <style> tagy, aby byla podporována okamžitá aktualizace (hot reload). Pro produkci mohou být extrahovány a sloučeny do jednoho CSS souboru.

S SFC si můžete hrát a prozkoumat, jak jsou kompilovány, na našem Hřišti.

V reálných projektech obvykle integrujeme kompilátor SFC s build nástrojem, jako je Vite nebo Vue CLI (který je založen na webpack), a Vue poskytuje oficiální nástroje pro vytvoření základní struktury SFC, abyste mohli začít co nejdříve. Podrobnosti najdete v sekci Nástroje pro SFC.

Jak je to s oddělením zájmů? ​

Někteří uživatelé zvyklí na tradiční přístup k vývoji webových stránek mohou mít obavy, že SFC míchají různé zájmy (concerns) na jednom místě - zatímco HTML/CSS/JS by měly být oddělené!

Na tuto otázku je důležité si uvědomit, že oddělení zájmů není to samé jako oddělení typů souborů. Konečným cílem inženýrských principů je zlepšit udržovatelnost kódu. Oddělení zájmů, pokud je aplikováno dogmaticky jako oddělení typů souborů, nám v kontextu stále složitějších frontendových aplikací nepomáhá tohoto cíle dosáhnout.

V moderním vývoji uživatelského rozhraní jsme zjistili, že namísto rozdělení kódu do tří obrovských vrstev, které se vzájemně proplétají, je mnohem smysluplnější rozdělit jej do volně provázaných komponent a ty skládat. Uvnitř komponenty jsou její šablona, logika a styly neoddělitelně propojeny a umístěním dohromady se komponenta stává koherentnější a snáze udržovatelnou.

Poznámka: I kdyby se vám myšlenka Single-File komponent nelíbila, stále můžete využít jejich funkce pro automatické načítání a předkompilaci oddělením JavaScriptu a CSS do samostatných souborů pomocí src importů.

Navrhněte úpravu této stránky na GitHubu