onDestroy: очистка
Выполняйте завершающую логику, например удаляйте таймеры или отменяйте подписки, при удалении компонента
«onDestroy: очистка» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужен onDestroy
onDestroy выполняется, когда компонент удаляется из DOM. Используйте его для удаления обработчиков, таймеров или подписок.
Импорт и вызов
Импортируйте его из svelte и передайте функцию обратного вызова.
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>Шаблон очистки
Отменяйте таймеры, прерывайте запросы и отменяйте подписки на хранилища.
onDestroy(() => clearInterval(id));Несколько onDestroys
Вызывайте его столько раз, сколько необходимо. Каждая функция очистки будет выполнена.
Выполняется и на сервере
В отличие от onMount, onDestroy выполняется на сервере во время очистки SSR.
Сочетание с onMount
Распространённый подход — настроить всё в onMount, а удалить в onDestroy.
Или просто верните функцию из onMount
Возврат функции из onMount эквивалентен onDestroy для простой очистки и позволяет хранить связанный код в одном месте.
Избегайте побочных эффектов при уничтожении
Очистка должна быть синхронной и быстрой. Длительные асинхронные операции могут не завершиться до перехода на другую страницу.
Автоматическая подписка на хранилище
Если вы используете сокращённую запись $store, Svelte автоматически отменяет подписку при уничтожении — вручную вызывать onDestroy не нужно.
Утечки памяти
Забытая очистка — главный источник утечек памяти в одностраничных приложениях. Всегда удаляйте обработчики, добавленные глобально.
Страницы и компоненты
При изменении маршрута компоненты страницы уничтожаются, вызывая onDestroy. Используйте его также для очистки, связанной с отдельной страницей.
Быстрая проверка
Как проще всего связать настройку и очистку?
Итоги
onDestroy выполняется при размонтировании компонента. Используйте его (или возвращаемую функцией onMount функцию) для очистки слушателей и таймеров.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «onDestroy: очистка» бесплатный?
Да — полный текст урока «onDestroy: очистка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «onDestroy: очистка»?
Выполняйте завершающую логику, например удаляйте таймеры или отменяйте подписки, при удалении компонента Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «onDestroy: очистка»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- onMount: выполнение после отображения
- onDestroy: очистка
- beforeUpdate и afterUpdate
- tick(): ожидание обновлений DOM