Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чи можна використовувати ref всередині композиційних хуків?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Так,** `ref` можна використовувати всередині композиційних хуків (`onMounted`, `onUpdated`, `onUnmounted` та ін.) - це нормальна і офіційно підтримувана практика. **Ключове:** у Composition API доступ до DOM-елементів через `ref` майже завжди робиться всередині хуків життєвого циклу, найчастіше - в `onMounted()`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Так,** `ref` **можна використовувати всередині композиційних хуків (**`onMounted`**,** `onUpdated`**,** `onUnmounted` **та ін.) - це якраз нормальна і офіційно підтримувана практика.** Більше того: > **У Composition API доступ до DOM-елементів через** `ref` **майже завжди робиться всередині хуків життєвого циклу, найчастіше - в** `onMounted()`**.** --- ## Чому це працює? Тому що: - `ref()` оголошується всередині `setup()` - його значення (`ref.value`) прив'яжеться до DOM-елемента **тільки після монтування компонента** - композиційні хуки (`onMounted`, `onUpdated` тощо) можуть використовувати будь-які змінні з `setup`, включно з `ref` --- ## Приклад: використання ref всередині `onMounted()` ```vue <template> <input ref="inputEl" /> </template> <script setup> import { ref, onMounted } from 'vue' const inputEl = ref(null) onMounted(() => { inputEl.value.focus() // працює! }) </script> ``` --- ## Приклад: використання ref всередині `onUpdated()` ```vue <script setup> import { ref, onUpdated } from 'vue' const box = ref(null) const count = ref(0) onUpdated(() => { console.log("Розмір після оновлення:", box.value.clientWidth) }) </script> ``` --- ## Які хуки найчастіше використовуються з ref? | Хук | Для чого використовується з ref | |---|---| | `onMounted()` | доступ до DOM вперше | | `onUpdated()` | вимірювання після оновлення | | `onBeforeUnmount()` | відписка від подій, якщо навішували на ref-елемент | | `onUnmounted()` | фінальне очищення | | `onActivated()` | відновлення ref після keep-alive | --- ## Важливо пам'ятати #### 1. Всередині `setup()` `ref` **ще не містить DOM-елемент** ```js console.log(inputEl.value) // null ``` Це нормально. #### 2. Не можна звертатися до ref у `setup()` або `onBeforeMount()` Елемента ще немає в DOM. #### 3. В `onMounted()` ref гарантовано існуєДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.