Хуки директив

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

Основные хуки

  • beforeCreate Вызывается сразу после инициализации экземпляра компонента, но до того, как будет настроена реактивность и события. На этом этапе доступны только props и data ещё не инициализированы.

  • created Срабатывает после того, как компонент создан и его реактивные данные настроены. Можно использовать для получения данных с сервера или начальной настройки состояния. На этом этапе DOM ещё не смонтирован.

  • beforeMount Вызывается перед монтированием компонента в DOM. На этом этапе шаблон уже скомпилирован, но HTML ещё не вставлен в документ.

  • mounted Срабатывает после вставки компонента в DOM. Идеальный момент для работы с DOM-элементами, сторонними библиотеками или запуском анимаций.

  • beforeUpdate Вызывается перед повторным рендером компонента при изменении реактивных данных. Позволяет выполнять подготовительные действия перед обновлением.

  • updated Срабатывает после обновления DOM в результате изменения реактивных данных. На этом этапе можно выполнять действия, зависящие от актуального состояния DOM.

  • beforeUnmount Вызывается перед уничтожением компонента. Можно использовать для отмены подписок или очистки таймеров.

  • unmounted Срабатывает после удаления компонента из DOM. Здесь можно освобождать ресурсы, очищать интервалы и события.

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

Директивы — это специальные атрибуты, которые расширяют функциональность DOM-элементов. Vue.js позволяет создавать пользовательские директивы для повторного использования логики.

Структура пользовательской директивы

app.directive('example', {
  beforeMount(el, binding, vnode, prevVnode) {
    // Выполняется перед монтированием
  },
  mounted(el, binding, vnode, prevVnode) {
    // Выполняется после монтирования
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // Выполняется перед обновлением
  },
  updated(el, binding, vnode, prevVnode) {
    // Выполняется после обновления
  },
  beforeUnmount(el, binding, vnode, prevVnode) {
    // Выполняется перед удалением
  },
  unmounted(el, binding, vnode, prevVnode) {
    // Выполняется после удаления
  }
});

Параметры директивы:

  • el — DOM-элемент, к которому привязана директива.

  • binding — объект с информацией о директиве:

    • value — значение директивы, например v-example="value";
    • oldValue — предыдущее значение;
    • arg — аргумент директивы, если указан (v-example:arg="value");
    • modifiers — объект модификаторов (v-example.modifier).

  • vnode — виртуальный DOM текущего элемента.

  • prevVnode — предыдущая версия виртуального DOM.

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

app.directive('focus', {
  mounted(el) {
    el.focus();
  },
  updated(el) {
    console.log('Элемент обновлён');
  }
});

Применение в шаблоне:

<input v-focus />

В этом примере элемент автоматически получает фокус при монтировании компонента.

Разница между хуками компонентов и директив

  • Хуки компонентов работают на уровне жизненного цикла всего компонента и позволяют контролировать его создание, обновление и удаление.
  • Хуки директив управляют конкретными DOM-элементами, к которым привязана директива, и позволяют манипулировать ими независимо от всего компонента.

Советы по использованию

  • Не выполнять тяжелые вычисления в хуках mounted и updated, чтобы не блокировать рендеринг.
  • Использовать beforeUnmount для очистки таймеров, подписок и слушателей событий.
  • Пользовательские директивы эффективны для повторяющейся логики работы с DOM, особенно когда одна и та же функциональность нужна на нескольких компонентах.
  • Для реактивных данных предпочтительно использовать хуки компонентов (watch, computed), а для чистого DOM — директивы.

Хуки и директивы вместе формируют мощный инструмент контроля поведения компонентов и элементов DOM, позволяя точно управлять временем выполнения кода и обеспечивая структурированность приложений на Vue.js.

Оглавление