Vue Academy · Урок

onUpdated и onBeforeUpdate

Реакция на изменения реактивных данных, предотвращение бесконечных циклов обновления в onUpdated

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

Хуки этапа обновления

Когда реактивные данные изменяются, Vue повторно отрисовывает компонент. Два хука ограничивают этот процесс: onBeforeUpdate срабатывает до обновления DOM, а onUpdated — после.

onUpdated: после обновления

onUpdated выполняется после обновления DOM в соответствии с новым реактивным состоянием. В этот момент отрисованный DOM соответствует Вашим данным.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Чтение обновлённого DOM

Поскольку обновление завершено, onUpdated подходит для чтения новых размеров или позиций элементов, зависящих от последней отрисовки.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Ловушка бесконечного цикла

Никогда не изменяйте реактивное состояние внутри onUpdated. Это запускает новую отрисовку, которая снова вызывает onUpdated, а тот снова изменяет состояние — возникает бесконечный цикл, из-за которого приложение зависает.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Вместо этого используйте наблюдение

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

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: до обновления

onBeforeUpdate выполняется после реактивного изменения, но до обновления DOM во Vue. Здесь DOM всё ещё содержит старые значения.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Пример: снимок перед обновлением

Поскольку onBeforeUpdate видит старый DOM, он идеально подходит для сохранения состояния перед изменением — например, для записи текущей позиции прокрутки, чтобы восстановить её после обновления.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Они срабатывают при каждой отрисовке

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

Не для побочных эффектов над данными

Эти хуки предназначены для работы с DOM, а не с данными. Для реакций, зависящих от данных, используйте computed для производных значений или watch для побочных эффектов от конкретных источников.

Итоги по порядку выполнения

При реактивном изменении последовательность такова: состояние изменяется, выполняется onBeforeUpdate со старым DOM, Vue обновляет DOM, затем выполняется onUpdated с новым DOM.

Как выбрать подходящий хук

onBeforeUpdate: сохранение старого состояния DOM, например прокрутки или выделения.
onUpdated: чтение нового DOM после обновления — но никогда не изменяйте здесь реактивное состояние.

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

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

Итоги

Кратко о хуках обновления:

onUpdated выполняется после обновления DOM — читайте здесь новые размеры.
Никогда не изменяйте внутри него реактивное состояние, иначе возникнет бесконечный цикл; вместо этого используйте watch.
onBeforeUpdate выполняется до обновления со старым DOM — это удобно для сохранения снимков.
Оба хука срабатывают при каждой отрисовке, поэтому их обработчики должны быть лёгкими.

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

Урок «onUpdated и onBeforeUpdate» бесплатный?

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

Чему я научусь в уроке «onUpdated и onBeforeUpdate»?

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

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

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

Сколько времени занимает урок «onUpdated и onBeforeUpdate»?

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

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

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

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

← Назад к Vue Academy