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

breaking

Обзор

Были переименованы функции хуков директив, чтобы лучше соответствовать жизненному циклу компонента.

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

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

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

Пример:

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

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

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

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

Во Vue 3 теперь создан более связный API для пользовательских директив. Как можно увидеть, он больше отличается от хуков жизненного цикла компонента, даже если привязываемся к похожим событиям. Теперь они также унифицированы:

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

Финальное API выглядит так:

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

Используя обновлённое API теперь предыдущий пример будет выглядеть так:

<p v-highlight="'yellow'">Highlight this text bright 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
}

ВНИМАНИЕ

С появлением фрагментов компоненты теперь могут иметь более одного корневого элемента. При применении директивы к компоненту с несколькими корневыми элементами она будет проигнорирована и выведено предупреждение в консоль.