Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Коли стають доступними ref-елементи?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`ref`-елементи** стають доступними лише після того, як компонент був змонтований, тобто у хуку `mounted`. **Ключове:** до mounted компонента ще немає в DOM, тому this.$refs порожній, а посилання ref() не прив'язані.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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-вузол фізично існує**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.