Vue Academy · Урок

onMounted и onBeforeMount

Доступ к DOM в onMounted, почему onBeforeMount редко требуется использовать напрямую

Урок 2 из 413 шагов

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

Хуки этапа монтирования

Этап монтирования включает два хука: onBeforeMount срабатывает непосредственно перед созданием DOM, а onMounted — сразу после его вставки. Они выглядят похожими, но решают совершенно разные задачи.

onMounted: DOM готов

К моменту выполнения onMounted шаблон компонента уже отрисован и находится на странице. Ссылки шаблона указывают на реальные элементы, поэтому именно здесь следует выполнять работу с DOM.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Пример: инициализация графика

Библиотекам, которые рисуют внутри элемента DOM, сначала нужен сам этот элемент. Инициализируйте их в onMounted, передав ссылку на элемент.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Пример: измерение DOM

Для чтения размеров, позиций или смещений прокрутки нужен реальный DOM. onMounted — самая ранняя безопасная точка для измерения элемента.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Пример: первоначальная загрузка данных

Получение данных при появлении компонента — классическая задача для onMounted. Сохраните результат в реф, чтобы шаблон обновился после его получения.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted выполняется один раз

onMounted срабатывает один раз для каждого экземпляра компонента. Если компонент размонтировать, а затем создать снова, новый экземпляр самостоятельно выполнит свой onMounted.

onBeforeMount: непосредственно перед вставкой

onBeforeMount выполняется после настройки, но до создания DOM. Реактивное состояние уже существует, однако ссылки шаблона всё ещё равны null, потому что ничего ещё не отрисовано.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

Почему onBeforeMount нужен редко

Большую часть работы по настройке можно выполнить прямо в <script setup>, который и так запускается до монтирования, а всё, что связано с DOM, должно ждать onMounted. Поэтому у onBeforeMount остаётся мало практических применений.

Распространённая ошибка

Попытка обратиться к ссылке шаблона внутри настройки или onBeforeMount возвращает null. Элемент не существует до завершения монтирования. Всегда переносите обращение к DOM в onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Регистрация нескольких хуков

Вы можете вызвать onMounted несколько раз; все функции обратного вызова выполнятся по порядку. Поэтому композаблы могут независимо регистрировать собственные onMounted.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

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

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

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

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

Ответь в интерактивном уроке

Итоги

Кратко о хуках монтирования:

onMounted выполняется после вставки DOM — используйте его для инициализации графиков, измерений, установки фокуса и первоначального получения данных.
Он выполняется один раз для каждого экземпляра, и его можно регистрировать несколько раз.
onBeforeMount выполняется до отрисовки, без доступа к DOM, и нужен редко.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

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

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

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

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

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

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

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

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

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

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

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

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

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

← Назад к Vue Academy