Какие хуки жизненного цикла существуют у Vue-компонента?

Жизненный цикл компонента во Vue описывает последовательность этапов от создания до удаления из DOM. На каждом этапе можно выполнить пользовательскую логику.

Хуки до создания компонента

На этом этапе компонент ещё не связан с DOM и данными.

1. beforeCreate

   • Данные и вычисляемые свойства ещё недоступны

   • Используется редко

2. created

   • Данные и методы уже доступны

   • DOM ещё не создан

   • Подходит для инициализации данных и запросов

Хуки монтирования

Этап добавления компонента в DOM.

1. beforeMount

   • Шаблон скомпилирован

   • DOM ещё не вставлен

2. mounted

   • Компонент вставлен в DOM

   • Можно работать с DOM-элементами

Хуки обновления

Вызываются при изменении реактивных данных.

1. beforeUpdate

   • Данные обновились

   • DOM ещё не перерисован

2. updated

   • DOM синхронизирован с данными

Хуки уничтожения

Используются для очистки ресурсов.

1. beforeUnmount

   • Компонент ещё существует

   • Подходит для отписки от событий

2. unmounted

   • Компонент удалён из DOM

   • Все связи разорваны

Вывод

Хуки жизненного цикла позволяют точно контролировать поведение компонента на каждом этапе его существования, от инициализации до полного удаления.