Какие методы жизненного цикла Vue важны на практике и чем они отличаются?

У компонента Vue есть хуки на создание, монтирование, обновление и удаление. На каждом этапе доступно разное.

Хуки и отличия

• `created` / код в `setup` — Что уже есть: реактивные данные, props; Для чего: загрузка данных без DOM
• `mounted` / `onMounted` — Что уже есть: DOM, ref на элементы; Для чего: работа с DOM, сторонние библиотеки
• `updated` / `onUpdated` — Что уже есть: DOM после перерисовки; Для чего: редкие замеры после обновления
• `unmounted` / `onUnmounted` — Для чего: очистка: таймеры, слушатели

Есть ещё before*-версии каждого хука и activated / deactivated для <KeepAlive>.

onMounted(() => {
  chart = new Chart(canvas.value, config);
});
onUnmounted(() => chart.destroy());

Частые ошибки

• Работать с DOM в created — его ещё нет.
• Менять состояние в updated — легко получить бесконечный цикл.
• Забывать очистку в unmounted.

Коротко для собеседования

created — данные без DOM, mounted — DOM готов, updated — после перерисовки, unmounted — очистка ресурсов.

Подробнее: Vue — хуки жизненного цикла