Правила приоритета B: Настоятельно рекомендуется ​

В большинстве проектов эти правила улучшают читабельность и/или удобство для разработчиков. Ваш код будет работать, если вы нарушите их, но нарушения должны быть редкими и хорошо обоснованными.

Файлы компонентов ​

Когда система сборки позволяет объединять файлы, каждый компонент должен находиться в своем собственном файле.

Это поможет вам быстрее найти компонент, когда вам нужно будет его отредактировать или просмотреть, как его использовать.

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

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

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

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

Регистр имени однофайлового компонента ​

Имена однофайловых компонентов должны быть либо всегда в PascalCase, либо всегда в kebab-case..

PascalCase лучше всего работает с автозаполнением в редакторах кода, так как он соответствует тому, как мы ссылаемся на компоненты в JS(X) и шаблонах, где это возможно. Однако имена файлов в смешанном регистре иногда могут создавать проблемы в файловых системах, нечувствительных к регистру, поэтому кебаб-кейс также вполне допустим.

components/
|- mycomponent.vue

components/
|- myComponent.vue

components/
|- MyComponent.vue

components/
|- my-component.vue

Имена базовых компонентов ​

Базовые компоненты (также известные как презентационные, немые или чистые компоненты), которые применяют стилистику и соглашения, специфичные для приложения, должны начинаться с определенного префикса, например Base, App или 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

Тесно связанные имена компонентов ​

Дочерние компоненты, тесно связанные со своим родителем, должны включать имя родительского компонента в качестве префикса..

Если компонент имеет смысл только в контексте одного родительского компонента, эта связь должна быть очевидна в его названии. Поскольку в редакторах файлы обычно располагаются в алфавитном порядке, это также позволит хранить связанные файлы рядом друг с другом.

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

Порядок слов в названиях компонентов ​

Имена компонентов должны начинаться со слов самого высокого уровня (часто наиболее общего) и заканчиваться описательными модифицирующими словами.

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

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

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

Самозакрывающиеся компоненты ​

Компоненты без содержимого должны быть самозакрывающимися в однофайловых компонентах, строковых шаблонах и JSX — но никогда в DOM-шаблонах..

Компоненты, которые самозакрываются, сообщают, что у них не только нет содержимого, но и намерены его не иметь. Это как разница между пустой страницей в книге и страницей с надписью «Эта страница намеренно оставлена пустой». Ваш код также чище без лишнего закрывающего тега.

К сожалению, HTML не позволяет пользовательским элементам быть самозакрывающимися — только официальный элемент «void». Поэтому данная стратегия возможна только в том случае, если компилятор шаблонов Vue может достичь шаблона до DOM, а затем предоставить HTML, соответствующий спецификации DOM.

<!-- В однофайловых компонентах, строковых шаблонах и JSX -->
<MyComponent></MyComponent>

<!-- В шаблонах DOM -->
<my-component/>

<!-- В однофайловых компонентах, строковых шаблонах и JSX -->
<MyComponent/>

<!-- В шаблонах DOM -->
<my-component></my-component>

Регистр имени компонента в шаблонах ​

В большинстве проектов имена компонентов всегда должны быть в PascalCase в однофайловых компонентах и строковых шаблонах — но в kebab-case в шаблонах DOM..

У PascalCase есть несколько преимуществ перед kebab-case:

• Редакторы могут автозаполнять имена компонентов в шаблонах, поскольку PascalCase также используется в JavaScript.
• <MyComponent> визуально отличается от однословного HTML-элемента больше, чем <my-component>, поскольку различаются два символа (две заглавные буквы), а не один (дефис).
• Если вы используете в шаблонах пользовательские элементы, не относящиеся к Vue, например веб-компоненты, PascalCase гарантирует, что ваши компоненты Vue останутся отчётливо видимыми.

К сожалению, из-за нечувствительности HTML к регистру, шаблоны в DOM всё равно должны использовать kebab-case.

Также имейте в виду, что если вы уже вложили значительные средства в kebab-case, то соответствие соглашениям HTML и возможность использовать один и тот же регистр во всех ваших проектах может быть важнее, чем перечисленные выше преимущества. В этих случаях использование кебабного регистра повсеместно также допустимо..

<!-- В однофайловых компонентах и шаблонах строк -->
<mycomponent/>

<!-- В однофайловых компонентах и шаблонах строк -->
<myComponent/>

<!-- В шаблонах DOM -->
<MyComponent></MyComponent>

<!-- В однофайловых компонентах и шаблонах строк -->
<MyComponent/>

<!-- В шаблонах DOM -->
<my-component></my-component>

<!-- Everywhere -->
<my-component></my-component>

Регистр имени компонента в JS/JSX ​

Имена компонентов в JS/JSX всегда должны быть в PascalCase, хотя они могут быть в kebab-case внутри строк для более простых приложений, которые используют только глобальную регистрацию компонентов через 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'
  // ...
}

Полные имена компонентов ​

В названиях компонентов следует отдавать предпочтение полным словам, а не аббревиатурам.

Автозаполнение в редакторах позволяет сократить расходы на написание длинных имён, а ясность, которую они обеспечивают, неоценима. В частности, следует избегать нечасто встречающихся сокращений.

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

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

Регистр имени параметра ​

В именах параметров при объявлении всегда должен использоваться «верблюжий» регистр (camelCase). При использовании внутри шаблонов в DOM параметр должен быть в «шашлычном» регистре (kebab-case). Шаблоны однофайловых компонентов и JSX могут использовать параметры как в «шашлычном», так и в «верблюжьем» регистрах. Регистр должен быть однообразным — если вы решили использовать параметр в «верблюжьем» регистре, убедитесь, что не используете «шашлычную» нотацию в своем приложении.

props: {
  'greeting-text': String
}

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

// для DOM-шаблонов
<welcome-message greetingText="hi"></welcome-message>

props: {
  greetingText: String
}

const props = defineProps({
  greetingText: String
})

// для SFC — пожалуйста, убедитесь, что ваш регистр соответствует проекту
// Можно использовать любой из вариантов, но мы не рекомендуем смешивать два разных стиля регистра
<WelcomeMessage greeting-text="hi"/>
// или
<WelcomeMessage greetingText="hi"/>

// для DOM-шаблонов
<welcome-message greeting-text="hi"></welcome-message>

Многоатрибутные элементы ​

Элементы с несколькими атрибутами должны занимать несколько строк, по одному атрибуту на строку..

В JavaScript разделение объектов с несколькими свойствами на несколько строк считается хорошей традицией, потому что так гораздо легче читать. Наши шаблоны и JSX заслуживают такого же внимания.

<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"
/>

Простые выражения в шаблонах ​

Шаблоны компонентов должны включать только простые выражения, а более сложные выражения нужно выносить в вычисляемые свойства или методы..

Сложные выражения в шаблонах делают их менее декларативными. Мы должны стремиться описать что должно появиться, а не как мы вычисляем это значение. Вычисленные свойства и методы также позволяют повторно использовать код.

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

<!-- В шаблоне -->
{{ normalizedFullName }}

// Сложное выражение было перенесено в вычисляемое свойство
computed: {
  normalizedFullName() {
    return this.fullName.split(' ')
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// Сложное выражение было перенесено в вычисляемое свойство
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

Простые вычисляемые свойства ​

Сложные вычисляемые свойства должны быть разбиты на как можно большее количество более простых свойств.

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)

Значения атрибутов в кавычках ​

Непустые значения HTML-атрибутов всегда должны быть заключены в кавычки (одинарные или двойные, в зависимости от того, что не используется в JS).

Хотя значения атрибутов без пробелов не обязаны содержать кавычки в HTML, такая практика часто приводит к тому, что пробелы обходятся стороной, делая значения атрибутов менее читабельными.

<input type=text>

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

<input type="text">

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

Сокращения директив ​

Сокращения директив (: для v-bind:, @ для v-on: и # для v-slot) должны использоваться всегда или никогда.

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

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

<template v-slot:header>
  <h1>Здесь может быть заголовок страницы</h1>
</template>

<template #footer>
  <p>Вот контактная информация</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>Здесь может быть заголовок страницы</h1>
</template>

<template v-slot:footer>
  <p>Вот контактная информация</p>
</template>

<template #header>
  <h1>Здесь может быть заголовок страницы</h1>
</template>

<template #footer>
  <p>Вот контактная информация</p>
</template>