Как получить доступ к DOM элементам через ref в created и mounted хуках во Vue

Что проверяют

Понимаете ли вы, что до монтирования узлов не существует. Вопрос про порядок жизненного цикла.

Как отвечать

В created доступа к элементу нет: компонент создан, реактивные данные готовы, но разметка ещё не вставлена в документ, поэтому ссылка пуста. В mounted элемент уже в документе, и ссылка заполнена.

<template>
  <input ref="field" />
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

const field = ref(null);   // имя переменной совпадает с ref в шаблоне

onMounted(() => field.value.focus());
</script>

Что важно добавить:

• в Composition API используется ref(null) с тем же именем, что и атрибут в шаблоне, а setup выполняется до монтирования, поэтому там значение тоже пустое;
• условный рендеринг: элемент под v-if появляется позже, и ссылка станет доступной только после того, как условие станет истинным. Дождаться этого можно через await nextTick();
• список через v-for: ссылка собирает массив элементов, а порядок гарантирован не всегда, поэтому надёжнее функция-ссылка;
• обновление разметки асинхронно: после изменения данных новый DOM появляется не сразу, и чтение размеров без nextTick вернёт старые значения;
• очистка: всё, что заведено по ссылке в mounted (наблюдатели, слушатели, сторонние библиотеки), снимается в onBeforeUnmount, иначе получится утечка.

Где спотыкаются

Пытаются работать с элементом в created и получают null.

Читают размеры сразу после изменения данных, не дождавшись обновления разметки.

Инициализируют стороннюю библиотеку по ссылке и не уничтожают её при размонтировании.