Структура Vue-компонента

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

1. Основные части компонента

Vue-компонент может быть определён в виде отдельного файла с расширением .vue или как объект в JavaScript. Файл .vue разделяется на три основные секции:

  1. <template> — шаблон, содержащий HTML-разметку компонента.
  2. <script> — скриптовая часть, где определяется логика компонента: данные, методы, вычисляемые свойства, жизненный цикл.
  3. <style> — стили компонента, которые могут быть локальными или глобальными.

Пример минимального компонента:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Нажми меня</button>
    <p>Счётчик: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Пример компонента Vue',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
button {
  padding: 8px 16px;
  font-size: 14px;
}
</style>

2. Шаблон (<template>)

Шаблон отвечает за визуальное отображение компонента. Важные особенности:

  • Декларативная привязка данных: использование синтаксиса {{ }} для вывода данных из объекта data.

  • Директивы Vue: специальные атрибуты, управляющие поведением DOM:

    • v-if / v-else / v-show — условный рендеринг элементов.
    • v-for — итерация по массивам или объектам.
    • v-bind — динамическое связывание атрибутов.
    • v-on — обработка событий.

  • Слоты (<slot>): позволяют передавать контент внутрь компонента извне.

3. Скрипт (<script>)

Скриптовая часть компонента содержит все логические элементы:

  • data() — функция, возвращающая объект с реактивными свойствами. Каждый компонент получает отдельный экземпляр данных.

  • methods — объект с функциями, которые выполняют действия и могут изменять состояние.

  • computed — вычисляемые свойства, автоматически обновляющиеся при изменении зависимостей.

  • watch — отслеживание изменений данных и выполнение действий при их изменении.

  • Жизненный цикл компонента: специальные хуки, вызываемые на разных этапах существования компонента:

    • beforeCreate / created
    • beforeMount / mounted
    • beforeUpdate / updated
    • beforeUnmount / unmounted

Пример использования computed и watch:

computed: {
  doubleCount() {
    return this.count * 2;
  }
},
watch: {
  count(newVal, oldVal) {
    console.log(`Счётчик изменился с ${oldVal} на ${newVal}`);
  }
}

4. Стили (<style>)

Секция стилей позволяет управлять внешним видом компонента. Основные моменты:

  • Scoped стили: атрибут scoped ограничивает применение стилей только текущим компонентом.

  • CSS препроцессоры: можно использовать lang="scss" или lang="less" для подключения препроцессоров.

  • Динамическое управление классами:

    • :class="{ active: isActive }" — условное применение класса.
    • :style="{ color: textColor }" — динамическая привязка стилей.

5. Регистрация компонентов

Компоненты можно использовать как локально, так и глобально.

  • Локальная регистрация:
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
  • Глобальная регистрация:
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

6. Однофайловые компоненты и организация проекта

Vue поощряет разделение проекта на отдельные .vue файлы, что улучшает читаемость и повторное использование кода. Рекомендуется структурировать проект по функциональным папкам:

src/
 ├─ components/
 │   ├─ Header.vue
 │   ├─ Footer.vue
 │   └─ Button.vue
 ├─ views/
 │   ├─ Home.vue
 │   └─ About.vue
 ├─ App.vue
 └─ main.js

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

7. Практические советы

  • Всегда отделять логику, шаблон и стили для улучшения читаемости.
  • Использовать scoped стили для предотвращения конфликта с глобальными классами.
  • Разбивать сложные компоненты на меньшие, переиспользуемые блоки.
  • Применять computed вместо методов для производных данных, чтобы повысить производительность.
  • Следить за жизненным циклом компонента для правильного управления асинхронными операциями и ресурсами.

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

Оглавление