Что такое lifecycle hooks (например, mounted)?

Lifecycle hooks (хуки жизненного цикла) — это специальные методы, которые Vue вызывает автоматически на разных этапах жизненного цикла компонента. С помощью этих хуков ты можешь выполнить код до или после определённых событий, например, до того как компонент отрендерится, после монтирования в DOM, перед уничтожением и т.д. Это позволяет более точно контролировать поведение компонентов в зависимости от их состояния и жизненного цикла.

Жизненный цикл компонента Vue

Компонент Vue проходит через несколько этапов:

  1. **Создание (Initialization)
    **
  2. **Монтаж (Mounting)
    **
  3. **Обновление (Updating)
    **
  4. **Удаление (Unmounting)
    **

На каждом из этих этапов вызываются определённые хуки.

Основные хуки жизненного цикла

1. beforeCreate()

  • Вызывается до инициализации data, props, computed и methods.

  • Здесь ты ещё не можешь обращаться к this.data или this.methods. 

beforeCreate() {
console.log('Компонент создаётся. Данные ещё недоступны');
}

2. created()

  • Вызывается сразу после инициализации data, props, methods, computed, watch.

  • Здесь можно уже обращаться к this, запускать запросы, подписки и т.д.

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

created() {
console.log('Доступ к данным есть:', this.someData);
}

3. beforeMount()

  • Вызывается перед монтированием шаблона в DOM.

  • this.$el ещё не привязан к реальному DOM-элементу.

  • Это последний момент перед вставкой шаблона. 

beforeMount() {
console.log('Компонент скоро будет вставлен в DOM');
}

4. mounted()

  • Вызывается после того как компонент вставлен в DOM.

  • Здесь this.$el ссылается на реальный DOM-элемент.

  • Идеальное место для инициализации сторонних библиотек, таймеров, манипуляций с DOM. 

mounted() {
console.log('Компонент в DOM. Можно использовать this.$el');
}

5. beforeUpdate()

  • Вызывается перед повторным рендерингом (когда data, props или computed изменились).

  • Но DOM ещё не обновлён.

  • Подходит для сохранения состояния перед обновлением. 

beforeUpdate() {
console.log('Что-то изменилось. DOM пока старый.');
}

6. updated()

  • Вызывается после того как DOM обновился.

  • Можно реагировать на изменения и, например, производить расчёты или измерения. 

updated() {
console.log('Компонент обновился. DOM уже новый.');
}

7. beforeUnmount() (в Vue 3) / beforeDestroy() (в Vue 2)

  • Вызывается перед уничтожением компонента.

  • Можно остановить таймеры, отписаться от подписок, освободить ресурсы. 

beforeUnmount() {
console.log('Компонент вот-вот будет удалён.');
}

8. unmounted() (в Vue 3) / destroyed() (в Vue 2)

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

  • Это финальный хук. 

unmounted() {
console.log('Компонент уничтожен и удалён из DOM.');
}

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

export default {
data() {
return {
count: 0
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
this.timer = setInterval(() => this.count++, 1000);
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
clearInterval(this.timer);
},
unmounted() {
console.log('unmounted');
}
}

Где полезно использовать хуки

  • created() — загрузка данных с сервера, инициализация состояния.

  • mounted() — инициализация библиотек (например, chart.js, swiper.js), прямые DOM-манипуляции.

  • beforeUpdate() — сравнение предыдущего и нового состояния перед ререндером.

  • updated() — обновление внешнего плагина после изменения DOM.

  • beforeUnmount() / unmounted() — очистка ресурсов (например, отписка от WebSocket, остановка таймеров, удаление обработчиков событий).

Хуки в Options API vs Composition API

В Options API хуки — это методы в объекте компонента (как в примерах выше).
В Composition API используются функции из vue, например onMounted, onUnmounted:

import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Компонент смонтирован');
});
onUnmounted(() => {
console.log('Компонент будет удалён');
});
}
}

Очередность вызова хуков

beforeCreate → created → beforeMount → mounted →

[обновления: beforeUpdate → updated] →

beforeUnmount → unmounted

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

26-07-2025
Easy 21 просмотров