> Как получить ref компонента сразу после его отрисовки при условном рендеринге во Vue (Vue.js)

В Vue 3 для получения ref компонента сразу после его отрисовки при условном рендеринге используйте nextTick в комбинации с watch или watchEffect. Это гарантирует, что DOM уже обновлён.

Пример:

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div v-if="show" ref="myRef">Содержимое</div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const show = ref(false)
const myRef = ref(null)

watch(show, async (newVal) => {
  if (newVal) {
    await nextTick()
    // myRef.value теперь доступен
    console.log(myRef.value) // <div>Содержимое</div>
  }
})
</script>

Ключевой момент: nextTick() дожидается завершения обновления DOM после изменения реактивного состояния. Без него myRef.value будет null, так как элемент ещё не отрендерен.

Для Vue 2 подход аналогичен, но используется this.$nextTick().