Что такое директива во Vue?

Что такое директива во Vue?

В Vue директива — это специальный атрибут в шаблонах, начинающийся с префикса `v-Cигнал для фреймворка, что нужно применить к элементу некоторое реактивное поведение. Директива — это один из ключевых механизмов, связывающих декларативную логику шаблонов с реактивной логикой JavaScript-кода в экземплярах компонентов.

Основная цель и синтаксис

Директива выглядит как HTML-атрибут, но с префиксом v-. Её значение обычно является JavaScript–выражением (за исключением некоторых случаев, как v-for):

<p v-if="isVisible">Этот текст может быть скрыт</p>
<a v-bind:href="url">Ссылка</a>
<button v-on:click="handleClick">Нажми меня</button>

Выражение в директиве (например, isVisible, url, handleClick) привязывается к данным или методам экземпляра компонента. При изменении этих данных Vue автоматически обновляет DOM в соответствии с новой директивой, что и является сутью реактивности.

Классификация и встроенные директивы

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

1. Директивы условного рендеринга и отображения

• v-if / v-else / v-else-if: Условно рендерят блок, полностью добавляя или удаляя элемент из DOM.

  <div v-if="type === 'A'">Тип A</div>
  <div v-else-if="type === 'B'">Тип B</div>
  <div v-else>Другой тип</div>
  

• v-show: Условно отображает элемент через CSS-свойство display. Элемент всегда присутствует в DOM.

  <h1 v-show="isOk">Привет!</h1>
  

2. Директивы привязки данных и атрибутов

• v-bind (или синтаксис :): Динамически привязывает один или несколько атрибутов, входных параметров компонента (props) к выражению.

  <!-- Полная запись -->
  <img v-bind:src="imageSrc">
  <!-- Сокращённая запись -->
  <img :src="imageSrc">
  <!-- Динамическое имя атрибута -->
  <button :[key]="value">Кнопка</button>
  

3. Директивы обработки событий

• v-on (или синтаксис @**: Прикрепляет к элементу слушатель события.

  <!-- Полная запись -->
  <button v-on:click="doThis">Нажми</button>
  <!-- Сокращённая запись -->
  <button @click="doThis">Нажми</button>
  <!-- Динамическое имя события -->
  <button @[event]="doThis">Нажми</button>
  

4. Директивы для работы со списками

• v-for: Рендерит элемент или блок шаблона несколько раз на основе исходных данных (массив, объект, число, итерируемая сущность). Требует использования ключа (key) для эффективного отслеживания идентичности узлов.

  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }} - {{ item.text }}
    </li>
  </ul>
  

5. Директивы двусторонней привязки (Two-way Binding)

• v-model: Создаёт двустороннюю привязку данных на элементах формы (input, textarea, select) и пользовательских компонентах. По сути, это синтаксический сахар для комбинации v-bind (привязка значения) и v-on (обработка событий ввода).

  <input v-model="message" placeholder="Отредактируй меня">
  <!-- Раскрывается примерно в: -->
  <input :value="message" @input="message = $event.target.value">
  

Пользовательские директивы

Помимо встроенных, Vue позволяет регистрировать пользовательские директивы для низкоуровневой манипуляции DOM. Это мощный инструмент для абстрагирования прямой работы с DOM (например, фокусировка полей ввода, триггеры для бесконечной прокрутки, кастомные инструментальные подсказки).

Директива определяется как объект с набором хуков жизненного цикла (аналогично компонентам):

• bind: Вызывается однократно при привязке директивы к элементу (аналог created).
• inserted: Вызывается, когда элемент вставлен в родительский DOM (аналог mounted).
• update: Вызывается при обновлении компонента (но до обновления его дочерних элементов).
• componentUpdated: Вызывается после обновления компонента и его дочерних элементов.
• unbind: Вызывается однократно при отвязке директивы от элемента (аналог destroyed).

Пример пользовательской директивы для фокуса:

// Глобальная регистрация
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// Использование в шаблоне
<input v-focus>

Роль директив в архитектуре Vue

Директива — это строительный блок декларативного подхода Vue. В отличие от императивного подхода (когда разработчик сам описывает каждый шаг изменения DOM, как в чистом JS или jQuery), директивы позволяют декларировать намерение ("покажи этот элемент, если условие истинно", "привяжи этот атрибут к данным", "вызови этот метод по клику"). Фреймворк берёт на себя всю работу по синхронизации DOM с состоянием приложения. Это делает код более предсказуемым, читаемым и легким в поддержке.

Таким образом, директива во Vue — это не просто атрибут, а ключевой абстрактный механизм связывания, который является фундаментом реактивного, декларативного рендеринга, отличающего Vue от многих других решений.