Vue Academy · Урок

onUnmounted и шаблоны очистки

Очистка интервалов, удаление обработчиков событий, отмена запросов в onUnmounted

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

Очистка после завершения работы

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

Хук onUnmounted

onUnmounted срабатывает после удаления компонента из DOM. Это последний шанс освободить ресурсы.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Шаблон: очистка интервалов

Если Вы запускаете интервал в onMounted, очистите его в onUnmounted. Иначе функция обратного вызова продолжит выполняться после удаления компонента и часто завершится сбоем из-за отсутствующего состояния.

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

Шаблон: удаление обработчиков событий

Глобальные обработчики на window или document переживают удаление компонента. Всегда используйте addEventListener вместе с removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Шаблон: отмена запросов данных

Ожидающий запрос, завершившийся после размонтирования, может попытаться изменить состояние уже удалённого компонента. Используйте AbortController, чтобы отменить его во время очистки.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Шаблон: отмена подписок

Подписки на хранилища, сокеты или шины событий необходимо отключать. Сохраните функцию отмены подписки и вызовите её в onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch возвращает функцию остановки

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

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Функция очистки watchEffect

Внутри watchEffect Вы получаете функцию onCleanup, которая выполняет очистку перед следующим запуском или при остановке. Это позволяет аккуратно освобождать ресурсы каждого запуска.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Почему очистка важна

Пропуск очистки приводит к утечкам памяти — ресурсы никогда не освобождаются, дублирующимся обработчикам — при нескольких монтированиях они накапливаются, — и ошибкам из-за обращений функций обратного вызова к уничтоженному состоянию. Чистый код всегда отключает всё, что он подключает.

Композаблы делают это автоматически

Хорошо написанные композаблы регистрируют собственную очистку в onUnmounted. Поэтому композаблы VueUse, такие как useEventListener, удаляют обработчик за Вас — очистка уже встроена.

Список действий для очистки

setInterval/setTimeout -> очистите их.
addEventListener -> удалите обработчик.
fetch -> abort с помощью AbortController.
Подписки -> вызовите unsubscribe.
Ручные наблюдатели -> вызовите возвращаемую функцию stop.

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

Проверьте свои знания об очистке.

Итоги

Главное об очистке:

onUnmounted выполняется после удаления — освобождайте ресурсы здесь.
Очищайте интервалы и тайм-ауты, удаляйте обработчики, отменяйте запросы, отключайте подписки.
watch возвращает функцию stop, которую при необходимости следует вызвать в onUnmounted.
watchEffect предоставляет функцию обратного вызова onCleanup для очистки ресурсов каждого запуска.

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

Урок «onUnmounted и шаблоны очистки» бесплатный?

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

Чему я научусь в уроке «onUnmounted и шаблоны очистки»?

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

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

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

Сколько времени занимает урок «onUnmounted и шаблоны очистки»?

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

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

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

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

← Назад к Vue Academy