Какой жизненный цикл проходит компонент Vue?

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

Жизненный цикл компонента Vue — это последовательность хуков (функций-обработчиков), которые вызываются на различных этапах существования компонента: от инициализации до удаления из DOM. Понимание этих этапов критически важно для правильного управления состоянием, side-эффектами, производительностью и ресурсами приложения.

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

Весь цикл можно разделить на четыре крупные фазы:

1. Создание (Initialization)
2. ​Монтирование (Mounting)
3. ​Обновление (Updating)
4. ​Размонтирование (Unmounting)

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

Детальное описание хуков жизненного цикла

1. Фаза Создания (Initialization)

На этом этапе инициализируются реактивные данные, вычисляемые свойства, методы и наблюдатели.

• beforeCreate: Вызывается самым первым. На этом моменте экземпляр компонента только что инициализирован. Данные (data), вычисляемые свойства (computed), методы (methods) и события (events/watchers) еще не настроены. Используется редко, обычно для глобальных инъекций или плагинов.
• created: Один из наиболее часто используемых хуков. К этому моменту экземпляр полностью создан. Данные стали реактивными, вычисляемые свойства и методы доступны. Однако DOM еще не сгенерирован, а элемент $el не существует. Идеальное место для выполнения начальных AJAX-запросов, подписок на события или инициализации данных, не требующих DOM.

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  beforeCreate() {
    console.log('beforeCreate: data is', this.message); // Выведет: undefined
  },
  created() {
    console.log('created: data is', this.message); // Выведет: 'Hello'
    // Хорошее место для fetch-запроса:
    // this.loadUserData();
  }
}

2. Фаза Монтирования (Mounting)

Этап, когда компонент вставляется в реальный DOM.

• beforeMount: Вызывается прямо перед началом рендеринга шаблона в DOM. Функция render вызывается впервые. $el уже существует, но содержит placeholder (например, <!--vue-->) и данные еще не отображены в DOM. Используется нечасто.
• mounted: Второй ключевой хук. К этому моменту экземпляр компонента смонтирован в DOM. $el теперь ссылается на реальный DOM-узел. Все дочерние компоненты также смонтированы (но не гарантируется, что их дочерние компоненты завершили монтирование). Широко используется для операций, требующих DOM: интеграция со сторонними библиотеками (D3.js, карты, слайдеры), ручные изменения DOM, вызовы API, зависящие от размеров или позиции элемента.

export default {
  mounted() {
    console.log('mounted: $el is', this.$el); // Реальный HTML-элемент
    // Пример интеграции с Chart.js:
    // this.chart = new Chart(this.$el.querySelector('canvas'), { ... });
  }
}

3. Фаза Обновления (Updating)

Вызывается при изменении реактивных данных или пропсов, что приводит к повторному рендерингу.

• beforeUpdate: Срабатывает, когда данные изменились, но DOM еще не был обновлен. Полезен для получения состояния DOM непосредственно перед применением изменений Vue (например, для сохранения позиции прокрутки). Логика здесь должна быть синхронной и не менять состояние, чтобы избежать бесконечных циклов.
• updated: Вызывается после того, как виртуальный DOM был перерендерен и пропатчен. DOM теперь актуален и отражает текущее состояние данных. Как и mounted, это хук для выполнения операций, зависящих от обновленного DOM. Требует осторожности: изменение состояния внутри updated может легко привести к бесконечному циклу обновлений. Всегда защищайте такие операции условиями.

export default {
  data() {
    return { count: 0 }
  },
  beforeUpdate() {
    // Сохраняем старую высоту элемента перед обновлением
    // this.oldScrollHeight = this.$el.scrollHeight;
  },
  updated() {
    // После обновления DOM можем что-то подстроить
    // if (this.oldScrollHeight) {
    //   this.$el.scrollTop += this.$el.scrollHeight - this.oldScrollHeight;
    // }
  }
}

4. Фаза Размонтирования (Unmounting)

Наступает, когда компонент удаляется из DOM (например, v-if="false", переход на другой маршрут Vue Router).

• beforeUnmount: Вызывается непосредственно перед размонтированием. Компонент все еще полностью функционален, его состояние и DOM доступны. Критически важное место для выполнения "очистки": отмена таймеров (clearInterval), отмена активных HTTP-запросов (например, через AbortController), отписка от глобальных или сторонних событий, уничтожение инстансов сторонних библиотек. Это предотвращает утечки памяти.
• unmounted: Вызывается после того, как компонент был размонтирован. Все его директивы отвязаны, слушатели событий удалены, а все дочерние экземпляры также уничтожены. К этому моменту взаимодействовать с DOM компонента или его данными уже нельзя.

export default {
  data() {
    return {
      intervalId: null,
      chartInstance: null
    }
  },
  mounted() {
    this.intervalId = setInterval(() => { ... }, 1000);
    this.chartInstance = new ThirdPartyChartLib(this.$el);
  },
  beforeUnmount() {
    // Очистка ресурсов
    clearInterval(this.intervalId);
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
    // EventBus.$off('some-event', this.handler);
  },
  unmounted() {
    console.log('Компонент уничтожен');
  }
}

Особые хуки

• errorCaptured: Позволяет перехватывать ошибки из любого дочернего компонента в цепочке наследования. Полезен для централизованной обработки ошибок или отправки их в системы мониторинга.
• renderTracked / renderTriggered (Dev-хуки): Доступны только в режиме разработки. Помогают в отладке реактивности, показывая, какие зависимости отслеживаются или какие вызвали повторный рендеринг.

Практические рекомендации

• Для получения данных с сервера предпочтительнее created (раньше) или mounted (если нужен DOM).
• Для интеграции со сторонними DOM-библиотеками почти всегда используйте mounted.
• Всегда очищайте созданные ресурсы (таймеры, подписки, сторонние инстансы) в beforeUnmount.
• Избегайте изменения реактивного состояния в updated, если это не защищено строгим условием для предотвращения циклов.
• В Composition API (setup()) эти хуки доступны через функции вида onMounted(), onUpdated() и т.д., которые должны быть вызваны синхронно внутри setup.

Понимание жизненного цикла позволяет писать предсказуемые, эффективные и надежные компоненты, правильно управляя ресурсами и side-эффектами на каждом этапе их существования.