Skip to main content

Коли стають доступними ref-елементи?

VueJunior~1 хв читання
Запропонувати правку

ref-елементи стають доступними лише після того, як компонент був змонтований, тобто в хуку mounted (або пізніше).

Простіше кажучи:

this.$refs в Options API і ref() в Composition API доступні лише після рендеру DOM - у хуку mounted.

Чому не раніше?

До етапу mounted компонента немає в DOM, тому:

  • елементи ще не створені
  • this.$refs порожній
  • посилання ref() не прив'язані

Доступність ref у різних API

Options API

У created()

js
created() { console.log(this.$refs.input) // undefined }

У mounted()

js
mounted() { console.log(this.$refs.input) // <input ...> }

Composition API

За допомогою ref():

html
<input ref="inputEl" />

У setup():

js
const inputEl = ref(null) onMounted(() => { console.log(inputEl.value) // DOM element })

До mounted:

js
console.log(inputEl.value) // null

Чому ref з'являється лише в mounted?

Тому що Vue спочатку:

  1. Виконує setup() / lifecycle-хуки створення
  2. Створює віртуальний DOM
  3. Монтує його в реальний DOM
  4. Лише тепер ref прив'язуються до DOM-елементів
  5. Викликає mounted

І лише тепер усі ref коректні.

Приклад

vue
<template> <input ref="field" /> </template> <script> export default { mounted() { // Тепер DOM-елемент доступний this.$refs.field.focus() } } </script>

Особливість: ref на компоненті

Коли ти робиш:

html
<MyComponent ref="comp" />

this.$refs.comp - це екземпляр дочірнього компонента. І він теж доступний лише в mounted.

Винятки?

  • Teleport може затримувати появу DOM-елемента -> ref буде доступний не одразу в mounted.
  • v-if може створювати компонент пізніше -> ref оновиться пізніше, при активації.

Але правило одне:

ref завжди доступний після того, як DOM-вузол фізично існує.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку