Какие знаешь хуки событий во Vue

«Какие знаешь хуки событий во Vue» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В Vue есть несколько хуков событий (lifecycle hooks), которые позволяют выполнять код на разных этапах жизненного цикла компонента. Основные хуки:

  • beforeCreate – вызывается до инициализации данных и событий.
  • created – вызывается после инициализации данных, но до монтирования DOM.
  • beforeMount – вызывается перед началом монтирования компонента в DOM.
  • mounted – вызывается после монтирования компонента в DOM.
  • beforeUpdate – вызывается перед обновлением DOM из-за изменений данных.
  • updated – вызывается после обновления DOM.
  • beforeUnmount (в Vue 2 – beforeDestroy) – вызывается перед удалением компонента.
  • unmounted (в Vue 2 – destroyed) – вызывается после удаления компонента.

Пример:

export default {
  created() {
    console.log('Компонент создан, но DOM ещё не сгенерирован');
  },
  mounted() {
    console.log('Компонент вмонтирован в DOM');
  }
}