Какие функции-хуки предоставляются директивами?vue-62

Директивы в Vue.js предоставляют набор хуков (hook functions), которые вызываются в определенные моменты жизненного цикла элемента. Эти хуки позволяют реагировать на изменения и управлять поведением DOM.

Основные хуки директив

1. bind

   • Вызывается однократно при первоначальном связывании директивы с элементом
   • Идеально для начальной настройки

   bind(el, binding, vnode) {
     // Инициализация
   }
   

2. inserted

   • Вызывается, когда элемент вставлен в родительский DOM
   • Гарантирует, что родитель существует

   inserted(el, binding, vnode) {
     // Работа с DOM
   }
   

3. update

   • Вызывается после обновления VNode родителя
   • Может вызываться до обновления дочерних элементов

   update(el, binding, vnode, oldVnode) {
     // Реакция на изменения
   }
   

4. componentUpdated

   • Вызывается после обновления VNode и всех дочерних VNode
   • Гарантирует, что всё дерево обновлено

   componentUpdated(el, binding, vnode, oldVnode) {
     // Действия после полного обновления
   }
   

5. unbind

   • Вызывается при удалении директивы
   • Место для очистки (таймеры, слушатели событий)

   unbind(el, binding, vnode) {
     // Уборка
   }
   

Хуки в Vue 3

В Vue 3 имена хуков были изменены для согласованности с жизненным циклом компонентов:

1. beforeMount → аналог bind
2. mounted → аналог inserted
3. beforeUpdate → новый хук (не было прямого аналога в Vue 2)
4. updated → аналог componentUpdated
5. beforeUnmount → новый хук
6. unmounted → аналог unbind

app.directive('highlight', {
  beforeMount(el, binding) {
    // Аналог bind
  },
  mounted(el, binding) {
    // Аналог inserted
  },
  updated(el, binding) {
    // Вызывается при обновлении компонента
  },
  unmounted(el) {
    // Очистка
  }
})

Аргументы хуков

Каждый хук получает следующие параметры:

1. el: DOM-элемент
2. binding: Объект с информацией:
   • name: Имя директивы (без v-)
   • value: Переданное значение
   • oldValue: Предыдущее значение (только в update)
   • expression: Строка выражения
   • arg: Аргумент после двоеточия (v-dir:arg)
   • modifiers: Объект модификаторов (v-dir.modif)
3. vnode: Текущий виртуальный узел
4. oldVnode: Предыдущий виртуальный узел (только в update/componentUpdated)

Практические примеры

1. Хук bind/mounted для инициализации:

   bind(el, binding) {
     el.dataset.originalText = el.textContent
     el.textContent = binding.value.toUpperCase()
   }
   

2. Хук update для реактивности:

   update(el, binding) {
     if (binding.value !== binding.oldValue) {
       el.style.color = binding.value
     }
   }
   

3. Хук unbind/unmounted для очистки:

   unbind(el) {
     window.removeEventListener('resize', el._handleResize)
   }
   

Важные особенности

1. Порядок вызова: Для одной директивы хуки вызываются в порядке bind → inserted → update → componentUpdated → unbind
2. Многократный вызов: update и componentUpdated могут вызываться многократно
3. Контекст this: Внутри хуков this не указывает на экземпляр Vue (используйте vnode.context)

Резюмируем:

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