beforeUpdate и afterUpdate
Подключайтесь к циклу обновления, чтобы проверять или изменять DOM до и после реактивных изменений
«beforeUpdate и afterUpdate» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Когда они выполняются
beforeUpdate выполняется перед применением реактивных обновлений к DOM, а afterUpdate — сразу после.
Варианты использования
Используйте их, чтобы считывать измерения DOM перед изменениями и корректировать положение прокрутки после них.
Автопрокрутка чата
Классический вариант использования — прокручивать чат вниз только в том случае, если пользователь уже находился внизу.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Частое выполнение
Эти обратные вызовы выполняются при каждом обновлении. Они должны работать быстро.
Поведение на сервере
Они не выполняются во время SSR. Считайте их предназначенными только для браузера.
Осторожно объединяйте
Состояние, сохранённое в beforeUpdate, можно применить в afterUpdate для реализации шаблона «измерить и применить».
Не используйте для большинства задач
Большая часть логики должна находиться в реактивных выражениях или действиях. Используйте эти функции только для измерения DOM.
Порядок выполнения
Порядок при обновлении: реактивные выражения -> beforeUpdate -> обновление DOM -> afterUpdate.
Первое монтирование
Обе функции выполняются при первом монтировании, а также при последующих обновлениях. Учитывайте первоначальный запуск.
Объединение с bind:this
Для измерения нужна ссылка на элемент DOM. Используйте bind:this.
Альтернатива с tick
Для однократных измерений после изменения запись await tick() может быть понятнее.
Быстрая проверка
Когда выполняется afterUpdate?
Итоги
beforeUpdate сохраняет состояние до изменения, а afterUpdate считывает или изменяет только что обновлённый DOM.
Часто задаваемые вопросы
Урок «beforeUpdate и afterUpdate» бесплатный?
Да — полный текст урока «beforeUpdate и afterUpdate» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «beforeUpdate и afterUpdate»?
Подключайтесь к циклу обновления, чтобы проверять или изменять DOM до и после реактивных изменений Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «beforeUpdate и afterUpdate»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- onMount: выполнение после отображения
- onDestroy: очистка
- beforeUpdate и afterUpdate
- tick(): ожидание обновлений DOM