Vue Academy · Урок

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

Создание, монтирование, обновление, размонтирование — что происходит на каждом этапе

«Обзор этапов жизненного цикла» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

У компонента есть жизненный цикл

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

Четыре фазы

Создание — выполняется настройка и инициализируется реактивность.
Монтирование — DOM создаётся и вставляется в страницу.
Обновление — реактивные изменения запускают повторную отрисовку.
Размонтирование — компонент удаляется и очищается.

Фаза 1: создание

Сначала создаётся экземпляр компонента и настраивается реактивность. В API композиции здесь выполняется <script setup> (или setup()). DOM ещё не существует, поэтому на этом этапе нельзя обращаться к элементам.

Что можно делать во время создания

На этапе создания удобно объявлять реактивное состояние и запускать работу, не зависящую от DOM, например начинать загрузку данных. Помните: шаблон ещё не отрисован, поэтому ссылки на DOM по-прежнему пусты.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

Фаза 2: монтирование

Затем Vue создаёт реальные узлы DOM из вашего шаблона и вставляет их в страницу. После монтирования ссылки шаблона указывают на настоящие элементы, и вы можете измерять DOM или изменять его.

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

onMounted запускается один раз сразу после вставки компонента. Здесь следует выполнять настройку, зависящую от DOM, например инициализировать график или установить фокус в поле ввода.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

Фаза 3: обновление

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

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

onBeforeUpdate запускается непосредственно перед обновлением DOM, а onUpdated — сразу после него. Они срабатывают при каждом реактивном изменении, влияющем на отрисовку.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

Фаза 4: размонтирование

Когда компонент удаляется — через v-if, при смене маршрута или удалении из списка, — Vue уничтожает его. Это подходящий момент для очистки таймеров, обработчиков и подписок, чтобы избежать утечек памяти.

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

onUnmounted запускается после удаления компонента. Здесь отменяйте интервалы, удаляйте глобальные обработчики и прерывайте выполняющиеся запросы.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Полный порядок

За жизненный цикл компонента хуки срабатывают в таком порядке: настройка, onBeforeMount, onMounted, затем повторяющиеся пары onBeforeUpdate/onUpdated и наконец onBeforeUnmount/onUnmounted.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете жизненный цикл.

Итоги

Теперь Вы видите всю картину:

Создание: выполняется настройка, реактивность готова, DOM отсутствует.
Монтирование: DOM создаётся и вставляется; ссылки становятся доступными.
Обновление: изменение реактивных данных запускает эффективное обновление.
Размонтирование: компонент удаляется; здесь выполняется очистка.

Часто задаваемые вопросы

Урок «Обзор этапов жизненного цикла» бесплатный?

Да — полный текст урока «Обзор этапов жизненного цикла» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обзор этапов жизненного цикла»?

Создание, монтирование, обновление, размонтирование — что происходит на каждом этапе Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Обзор этапов жизненного цикла»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy