Pravidla priority B: Silně doporučené ​

Tato pravidla byla zavedena pro zlepšení čitelnosti a/nebo komfortu pro vývojáře na většině projektů. Pokud je porušíte, váš kód bude stále fungovat, ale porušení by měla být vzácná a dobře odůvodněná.

Soubory komponent ​

Kdykoli je k dispozici build systém pro poskládání souborů, každá komponenta by měla být ve svém vlastním souboru.

To vám pomůže rychleji najít komponentu, když ji potřebujete upravit nebo zkontrolovat, jak ji používat.

app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

Velká a malá písmena v názvech Single-file komponent (SFC) ​

Názvy souborů Single-File komponent (SFC) by měly být buďto vždy PascalCase nebo vždy kebab-case.

PascalCase funguje nejlépe s automatickým dokončováním v editorech kódu, protože je konzistentní s tím, jak odkazujeme na komponenty v JS(X) a v šablonách, kdykoli je to možné. Názvy s mixem malých a velkých písmen však mohou někdy způsobit problémy v case-insensitive souborových systémech, a proto je kebab-case také dokonale přijatelný.

components/
|- mycomponent.vue

components/
|- myComponent.vue

components/
|- MyComponent.vue

components/
|- my-component.vue

Názvy základních komponent ​

Základní komponenty (alias prezentační (presentational), hloupé (dumb) nebo čisté (pure) komponenty), ve kterých platí pravidla stylování a konvence typické pro aplikaci, by měly vždy začít se speciální předponou, například Base, App, or V.

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

Těsně provázané názvy komponent ​

Komponenty potomků, ktero jsou těsně provázané s jejich rodičovskou komponentou, by měly obsahovat název nadřazené komponenty jako předponu.

Pokud má komponenta smysl pouze v kontextu jedné nadřazené komponenty, měl by být tento vztah zřejmý z jejího názvu. Vzhledem k tomu, že editory obvykle řadí soubory abecedně, toto také drží související soubory vedle sebe.

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Pořadí slov v názvech komponent ​

Názvy komponent by měly začínat (většinou) nejobecnějšími slovy a končit popisnými modifikujícími výrazy.

Také si uvědomte, že co je považováno za "nejvyšší level" bude platit v kontextu vaší aplikace. Představte si například aplikaci s vyhledávacím formulářem. Může obsahovat komponenty jako jsou tato:

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

Jak jste si mohli všimnout, je docela obtížné zjistit, které komponenty jsou specifické pro vyhledávání. Nyní přejmenujme komponenty podle pravidla:

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

Protože editory obvykle organizují soubory abecedně, všechny důležité vztahy mezi komponentami jsou nyní zřejmé na první pohled.

Možná vás napadlo vyřešit tento problém vnořením všech komponent vyhledávání do adresáře „search“ a všech komponent nastavení do adresáře „settings“. Tento přístup doporučujeme zvážit pouze ve skutečně velkých aplikacích (např. 100+ komponent), a to z těchto důvodů:

• Procházení vnořenými podadresáři obvykle zabere více času než procházení jediným adresářem components.
• Konflikty názvů (např. více komponent ButtonDelete.vue) ztěžují rychlou navigaci ke konkrétní komponentě v editoru kódu.
• Refaktorování bude obtížnější, protože funkce find-and-replace často nestačí k aktualizaci relativních odkazů na přesouvanou komponentu. :::

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

Self-closing komponenty ​

Komponenty, kter nemají žádný obsah, by měly být zapsány jako nepárové (self-closing) v Single-File komponentách (SFC), string-šablonách, a JSX - nikdy však v in-DOM šablonách.

Komponenty zapsané jako nepárový (self-closing) tag sdělují nejen, že nemají žádný obsah, ale ani nemají žádný obsah mít. Je to rozdíl mezi prázdnou stránkou v knize a stránkou označenou „Tato stránka byla záměrně ponechána prázdná“. Váš kód je také bez zbytečného uzavíracího tagu čistší.

HTML bohužel neumožňuje uživatelské nepárové (self-closing) elementy – pouze oficiální „void“ elementy. To je důvod, proč je tato strategie možná pouze tehdy, když se Vue kompilátor šablon může k šabloně dostat před jejím vložením do DOM a poskytnout HTML vyhovující specifikaci.

<!-- Single-File komponenty (SFC), string-šablony a JSX -->
<MyComponent></MyComponent>

<!-- in-DOM šablony -->
<my-component/>

<!-- Single-File komponenty (SFC), string-šablony a JSX -->
<MyComponent/>

<!-- in-DOM šablony -->
<my-component></my-component>

Velká a malá písmena v názvech komponent v šablonách ​

Ve většině projektů názvy komponent v Single-File komponentách (SFC) a string-šablonách měly být vždy PascalCase – ale v in-DOM šablonách by názvy měly být kebab-case.

PascalCase má oproti kebab-case několik výhod:

• Editory mohou v šablonách automaticky doplňovat názvy komponent, protože PascalCase se používá i v JavaScriptu.
• <MyComponent> je vizuálně odlišnější od jednoslovného HTML elementu než <my-component>, protože existují dva rozdílné znaky (dvě velká písmena), nikoli pouze jeden (pomlčka).
• Pokud ve svých šablonách použijete jakékoli custom prvky mimo Vue, jako je Web Component, PascalCase zajistí, že vaše Vue komponenty zůstanou zřetelně viditelné.

Bohužel kvůli necitlivosti HTML na malá a velká písmena musí in-DOM šablony nadále používat kebab-case.

Také vezměte do úvahy, že pokud jste již do kebab-case investovali hodně úsilí, může být konzistence s HTML konvencemi a možnost používat velká a malá písmena stejně ve všech vašich projektech důležitější než výše uvedené výhody. V těchto případech je také přijatelné používání kebab-case všude.

<!-- Single-File komponenty (SFC) a string-šablony -->
<mycomponent/>

<!-- Single-File komponenty (SFC) a string-šablony -->
<myComponent/>

<!-- in-DOM šablony -->
<MyComponent></MyComponent>

<!-- Single-File komponenty (SFC) a string-šablony -->
<MyComponent/>

<!-- in-DOM šablony -->
<my-component></my-component>

<!-- Všude -->
<my-component></my-component>

Velká a malá písmena v názvech komponent v JS/JSX ​

Názvy komponent v JS/JSX by měly být vždy PascalCase, přestože mohou být kebab-case uvnitř řetězců pro jednodušší aplikace, které používají pouze globální registraci komponent skrz app.component.

app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent'
  // ...
}

export default {
  name: 'my-component'
  // ...
}

app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent'
  // ...
}

Celá slova jako názvy komponent ​

Názvy komponent by měly upřednostňovat celá slova před zkratkami.

Automatické doplňování textu v editorech činí náklady na psaní delších názvů velmi nízké, přičemž srozumitelnost, kterou poskytují, je neocenitelná. Zejména méně obvyklým zkratkám je třeba se vyhnout vždy.

components/
|- SdSettings.vue
|- UProfOpts.vue

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Velká a malá písmena v názvech vlastností (props) ​

Názvy vlastností (props) by měly při deklaraci vždy používat camelCase. Při použití uvnitř DOM-šablon by vlastnosti měly být psány kebab-case. Šablony Single-File komponent (SFC) a JSX mohou pro vlastnosti používat jak kebab-case, tak camelCase. Použití by mělo být konzistentní – pokud se rozhodnete použít rekvizity camelCased identifikátory, ujistěte se, že ve své aplikaci nepoužíváte i ty s kebab-case.

props: {
  'greeting-text': String
}

const props = defineProps({
  'greeting-text': String
})

// DOM-šablony
<welcome-message greetingText="hi"></welcome-message>

props: {
  greetingText: String
}

const props = defineProps({
  greetingText: String
})

// pro SFC - ujistěte se, že je použití malých a velkých písmen konzistentní napříč projektem
// můžete použít kteroukoli konvenci, ale nedoporučujeme míchat oba dva různé styly
<WelcomeMessage greeting-text="hi"/>
// nebo
<WelcomeMessage greetingText="hi"/>

// DOM-šablony
<welcome-message greeting-text="hi"></welcome-message>

Elementy s více atributy ​

Elementy s více atributy by měly měly být roztaženy na více řádků, s jedním atributem na řádek.

V JavaScriptu je dělení objektů s více vlastnostmi na více řádků obecně považováno za dobrou praxi, protože je mnohem snáz čitelné. Naše šablony a JSX si zaslouží stejnou úvahu.

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

Jednoduché výrazy v šablonách ​

Šablony komponent by měly obsahovat pouze jednoduché výrazy a složitější výrazy přepracované do computed proměnných nebo funkcí.

Složité výrazy ve vašich šablonách je učiní méně deklarativní. Měli bychom se snažit popsat co by se mělo objevit, nikoli jak tuto hodnotu počítáme. Computed proměnné a funkce také umožňují opětovné použití kódu.

{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

<!-- V šabloně -->
{{ normalizedFullName }}

// Složitý výraz byl přesunut do computed proměnné
computed: {
  normalizedFullName() {
    return this.fullName.split(' ')
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// Složitý výraz byl přesunut do computed proměnné
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

Jednoduché computed proměnné ​

Složité computed proměnné by měly být rozděleny na co nejvíce jednodušších proměnných.

computed: {
  price() {
    const basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

const price = computed(() => {
  const basePrice = manufactureCost.value / (1 - profitMargin.value)
  return basePrice - basePrice * (discountPercent.value || 0)
})

computed: {
  basePrice() {
    return this.manufactureCost / (1 - this.profitMargin)
  },

  discount() {
    return this.basePrice * (this.discountPercent || 0)
  },

  finalPrice() {
    return this.basePrice - this.discount
  }
}

const basePrice = computed(
  () => manufactureCost.value / (1 - profitMargin.value)
)

const discount = computed(
  () => basePrice.value * (discountPercent.value || 0)
)

const finalPrice = computed(() => basePrice.value - discount.value)

Hodnoty atributů v úvozovkách ​

Neprázdné hodnoty HTML atributů by měly být vždy v uvozovkách (jednoduchých nebo dvojitých, podle toho, co se nepoužívá v JS).

Ačkoli hodnoty atributů bez mezer nemusí mít v HTML uvozovky, tato praxe často vede k vyhýbání se mezerám, takže hodnoty atributů jsou méně čitelné.

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

Direktivní zkratky ​

Direktivní zkratky (: pro v-bind:, @ pro v-on: a # pro v-slot) by měly být použity buď všude nebo vůbec.

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>