onMount: выполнение после отображения
Выполняйте код после добавления компонента в DOM
«onMount: выполнение после отображения» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Назначение onMount
onMount выполняется после добавления компонента в DOM. Это удобно для запуска асинхронных операций или доступа к ссылкам.
Импорт
Импортируйте его из svelte в начале скрипта.
<script>
import { onMount } from "svelte";
</script>Базовое использование
Передайте функцию, которая выполнится один раз после монтирования.
onMount(() => {
console.log("mounted");
});Асинхронные операции
Внутри можно использовать async/await или вернуть обещание.
onMount(async () => {
data = await fetch("/api").then(r => r.json());
});Доступ к элементу
Сочетайте с bind:this, чтобы изменять DOM сразу после монтирования.
onMount(() => inputEl.focus());Функция очистки
Верните функцию из onMount, чтобы выполнить очистку при размонтировании компонента.
onMount(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Сервер и браузер
onMount не выполняется во время SSR. Используйте его для кода, предназначенного только для браузера, например настройки canvas или WebGL.
Несколько onMounts
В одном компоненте можно несколько раз вызвать onMount. Они выполняются в порядке объявления.
Подписки
Подписывайтесь здесь на внешние источники, а отменяйте подписку в возвращаемой функции очистки.
Избегайте тяжёлых операций
Откладывайте некритичные операции или используйте requestIdleCallback, чтобы не блокировать первую отрисовку.
Отличие от beforeUpdate
onMount выполняется ровно один раз, а beforeUpdate — перед каждым реактивным обновлением.
Быстрая проверка
Как очистить интервал, запущенный в onMount?
Итоги
onMount выполняется один раз после монтирования; верните функцию для очистки; на сервере он никогда не выполняется.
Часто задаваемые вопросы
Урок «onMount: выполнение после отображения» бесплатный?
Да — полный текст урока «onMount: выполнение после отображения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «onMount: выполнение после отображения»?
Выполняйте код после добавления компонента в DOM Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «onMount: выполнение после отображения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- onMount: выполнение после отображения
- onDestroy: очистка
- beforeUpdate и afterUpdate
- tick(): ожидание обновлений DOM