Что такое пользовательские директивы?vue-60

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

Основные концепции

  1. Назначение:

    • Прямое манипулирование DOM
    • Интеграция сторонних библиотек, работающих с DOM
    • Создание повторно используемого DOM-поведения

  2. Отличие от компонентов:

    • Компоненты — это абстракции для создания самостоятельных UI-единиц
    • Директивы — это декораторы для существующих элементов

Типы директив

  1. Глобальные:

    Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

  2. Локальные:

    directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

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

Каждая директива может содержать следующие хуки:

  1. bind: Вызывается однократно при первоначальном связывании
  2. inserted: Элемент вставлен в родительский DOM
  3. update: Вызывается после обновления VNode (может происходить до обновления дочерних)
  4. componentUpdated: Вызывается после обновления VNode и всех дочерних VNode
  5. unbind: Вызывается при удалении директивы
Vue.directive('demo', {
  bind(el, binding, vnode) {
    // Инициализация
  },
  inserted(el, binding, vnode) {
    // Работа с DOM
  },
  update(el, binding, vnode, oldVnode) {
    // Реакция на изменения
  },
  unbind(el, binding, vnode) {
    // Уборка
  }
})

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

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

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

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

  1. Простая директива фокуса:

    Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

    <input v-focus>

  2. Директива с аргументами и модификаторами:

    Vue.directive('pin', {
  bind(el, binding) {
    el.style.position = 'fixed'
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
})

    <div v-pin:bottom="200">Прикреплено 200px от низа</div>

  3. Динамическое изменение стилей:

    Vue.directive('color-swatch', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value
  },
  update(el, binding) {
    el.style.backgroundColor = binding.value
  }
})

Лучшие практики

  1. Используйте для низкоуровневых DOM-операций
  2. Избегайте излишней сложности - для сложной логики лучше подходят компоненты
  3. Очищайте ресурсы в unbind (таймеры, слушатели событий)
  4. Документируйте поведение директивы

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

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

const app = Vue.createApp({})

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

Основные изменения:

  • bind → beforeMount
  • inserted → mounted
  • update → удален (используйте beforeUpdate)
  • componentUpdated → updated
  • unbind → unmounted

Резюмируем:

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

Вопросы

Собеседования