Користувацькі директиви

несумісно

#

Огляд #

Функції хуків для директив було перейменовано для кращої відповідності життєвому циклу компонента.

Крім того, рядок expression більше не передається як частина об'єкта binding.

2.x Синтаксис #

У версії Vue 2 користувацькі директиви були створені за допомогою наведених нижче хуків для керування життєвим циклом елемента, кожен з яких є необов'язковим:

• bind - Викликається, коли директива прив'язується до елемента, лише один раз.
• inserted - Викликається, коли елемент вставлено в батьківський DOM.
• update - Цей хук викликається, коли елемент оновлюється, але дочірні елементи ще не оновлено.
• componentUpdated - Цей хук викликається, коли елемент та його дочірні елементи оновилися.
• unbind - Цей хук викликається після видалення директиви. Також викликається тільки один раз.

Ось один із прикладів:

<p v-highlight="'yellow'">Виділіть цей текст яскраво-жовтим кольором</p>

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

Тут, під час початкових налаштувань для цього елемента, директива прив'язує стиль, передаючи через value, яке може бути оновлено до різних значень через застосунок.

3.x Синтаксис #

Однак у версії Vue 3 ми створили більш цілісний API для користувацьких директив. Як ви можете бачити, вони значно відрізняються від методів життєвого циклу компонентів, хоча ми підключаємося до схожих подій. Тепер ми об'єднали їх ось так:

• created - нове! Викликається перед застосуванням атрибутів елемента або слухачів подій.
• bind → beforeMount
• inserted → mounted
• beforeUpdate: нове! Він викликається перед оновленням самого елемента, так само як і хуки життєвого циклу компонента.
• update → видалено! Занадто багато подібностей до updated, тому це є зайвим. Будь ласка, використовуйте updated.
• componentUpdated → updated
• beforeUnmount: нове! Подібно до хуків життєвого циклу компонента, цей метод буде викликано безпосередньо перед тим, як елемент буде демонтовано.
• unbind -> unmounted

Остаточний варіант API виглядає наступним чином:

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // нове
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // нове
  updated() {},
  beforeUnmount() {}, // нове
  unmounted() {}
}

Оновлений API можна використовувати так, як показано в попередньому прикладі:

<p v-highlight="'yellow'">Виділіть цей текст яскраво-жовтим кольором</p>

const app = Vue.createApp({})

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})

Тепер, коли хуки життєвого циклу користувацьких директив дублюють життєвий цикл самих компонентів, про них стало легше думати та запам'ятовувати!

Крайній випадок: Доступ до екземпляра компонента #

Загалом рекомендується тримати директиви незалежними від екземпляра компонента, в якому вони використовуються. Доступ до екземпляра з користувацької директиви часто є ознакою того, що директива має бути компонентом. Однак існують ситуації, коли це дійсно має сенс.

У версії Vue 2 доступ до екземпляра компонента здійснювався через аргумент vnode:

bind(el, binding, vnode) {
  const vm = vnode.context
}

У версії Vue 3 екземпляр тепер є частиною binding:

mounted(el, binding, vnode) {
  const vm = binding.instance
}

Стратегія міграції #

Прапорець збірки міграції: CUSTOM_DIR