Жизненные циклы компонентов — это ключевая концепция во Vue.js, и понимание их работы может значительно облегчить разработку. В этой статье мы подробно рассмотрим, как компоненты «живут» и «умирают» в вашем приложении, когда они создаются, обновляются и уничтожаются, а также как можно использовать жизненные циклы для управления поведением ваших компонентов.

Что такое жизненный цикл компонента?

Компонент в Vue.js проходит через несколько стадий, начиная от создания и заканчивая его удалением. Эти стадии называются жизненным циклом компонента. Vue предоставляет несколько хуков, которые позволяют вам выполнить код на каждом этапе этого цикла. Это как установка ловушек: на каждой стадии жизненного цикла можно перехватить нужный момент и добавить необходимую логику.

Представьте, что вы строите дом. На каждом этапе строительства — от закладки фундамента до установки крыши — вам нужно следить за качеством работ. То же самое и с компонентами: нужно контролировать их поведение на каждом этапе жизненного цикла.

Основные этапы жизненного цикла

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

1. Создание компонента

Когда компонент создаётся, Vue проходит через несколько фаз:

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

Пример:

<script setup>
import { onBeforeMount, onMounted } from 'vue';

onBeforeMount(() => {
  console.log('Компонент будет создан');
});

onMounted(() => {
  console.log('Компонент создан');
});
</script>

2. Монтирование компонента

После того как компонент был создан, Vue вставляет его в DOM:

• beforeMount — этот хук вызывается перед тем, как элемент будет вставлен в DOM. Компонент готовится к рендерингу, но ещё не виден на экране.
• mounted — этот хук вызывается после того, как компонент был смонтирован в DOM. Это идеальный момент для взаимодействия с реальными DOM-элементами, если вам нужно, например, инициировать какой-то плагин или библиотеку, работающую напрямую с DOM.

Пример:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Компонент добавлен в DOM');
});
</script>

3. Обновление компонента

Когда данные компонента изменяются, Vue обновляет его, проходя через новые хуки:

• beforeUpdate — хук вызывается перед обновлением DOM. Это полезно, если вам нужно выполнить какое-то действие до изменения данных.
• updated — этот хук вызывается после того, как обновление компонента завершено, и изменения отразились в DOM. Здесь можно выполнить дополнительную логику, которая зависит от обновлённого состояния компонента.

Пример:

<script setup>
import { onBeforeUpdate, onUpdated } from 'vue';

onBeforeUpdate(() => {
  console.log('Данные компонента изменились, сейчас будет обновление');
});

onUpdated(() => {
  console.log('Компонент обновлён');
});
</script>

4. Уничтожение компонента

Когда компонент больше не нужен, Vue его уничтожает:

• beforeUnmount — этот хук вызывается перед тем, как компонент будет удалён из DOM. Обычно здесь очищаются сторонние ресурсы или подписки.
• unmounted — вызывается сразу после того, как компонент удалён из DOM. Это окончательный этап жизненного цикла компонента.

Пример:

<script setup>
import { onBeforeUnmount, onUnmounted } from 'vue';

onBeforeUnmount(() => {
  console.log('Компонент будет уничтожен');
});

onUnmounted(() => {
  console.log('Компонент уничтожен');
});
</script>

Практическое применение жизненных циклов

Теперь давайте рассмотрим реальные примеры того, где могут быть полезны хуки жизненного цикла:

• Загрузка данных. В хуке mounted вы можете запросить данные с сервера и установить их в состоянии компонента, так как к этому моменту компоненты уже смонтированы в DOM.
• Подключение и отключение событий. Например, если вы хотите отслеживать события скролла, вы можете добавить обработчики в хуке mounted и удалить их в unmounted, чтобы избежать утечек памяти.

Пример:

<script setup>
import { onMounted, onUnmounted } from 'vue';

const handleScroll = () => {
  console.log('Скролл произошёл');
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

Жизненные циклы и Composition API

Когда вы используете Composition API, Vue предоставляет специальные хуки, такие как onMounted, onUpdated, onUnmounted, которые можно вызывать внутри любой функции или компонента. Это делает код более гибким и модульным.