Vue nextTick(): дочекайтеся DOM замість setTimeout()
Після зміни реактивного стану використовуйте nextTick(), якщо наступна дія залежить від уже оновленого DOM. Не вгадуйте момент оновлення через setTimeout().
Vue не оновлює DOM синхронно після кожної зміни реактивного стану. Якщо наступний рядок коду залежить від уже оновленого DOM, setTimeout() лише вгадує момент, коли оновлення могло завершитися.
Для цього Vue має nextTick().
Замість setTimeout() дочекайтеся оновлення DOM
function openInput() { showInput.value = true; setTimeout(() => { input.value?.focus(); }, 0);}async function openInput() { showInput.value = true; await nextTick(); input.value?.focus();}У цьому прикладі зміна showInput може додати поле через v-if. Одразу після присвоєння нового значення Vue ще може не встигнути оновити DOM, тому input.value ще не гарантовано доступний.
await nextTick() чекає наступного циклу оновлення DOM Vue. Після цього можна працювати з елементом, який щойно з'явився.
Повний приклад з template ref
<script setup>import { nextTick, ref } from 'vue'; const showInput = ref(false);const input = ref(null); async function openInput() { showInput.value = true; await nextTick(); input.value?.focus();}</script> <template>Коли nextTick() справді потрібний
- потрібно сфокусувати елемент, який щойно з'явився через
v-if; - потрібно виміряти розмір елемента після зміни стану;
- потрібно прокрутити контейнер після додавання нового вмісту;
- наступна дія напряму залежить від уже оновленого DOM.
Якщо код не залежить від DOM, nextTick() додавати не потрібно.
Якщо після зміни стану вам потрібно працювати з результатом рендерингу, не вгадуйте час через setTimeout(). Змініть стан, виконайте await nextTick() і працюйте з уже оновленим DOM.
