Чи можна використовувати ref всередині композиційних хуків?

VueJunior~1 хв читання

Так, 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-елемент

console.log(inputEl.value) // null

Це нормально.

2. Не можна звертатися до ref у `setup()` або `onBeforeMount()`

Елемента ще немає в DOM.

3. В `onMounted()` ref гарантовано існує

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

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

Premium

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