Що таке nexttick у Vue.js?

Що таке nextTick?

nextTick — це утиліта, яка дозволяє вам дочекатися, поки Vue завершить оновлення DOM після зміни реактивного стану. Vue групує оновлення DOM — nextTick виконує ваш код після наступного циклу оновлення DOM.

Проблема

vue

<script setup>
import { ref } from 'vue'

const message = ref('Hello')

function updateMessage() {
  message.value = 'Updated!'

  // ❌ DOM ще не оновлено!
  console.log(document.getElementById('msg')?.textContent)
  // Все ще показує: "Hello"
}
</script>

<template>
  <p id="msg">{{ message }}</p>
  <button @click="updateMessage">Оновити</button>
</template>

Рішення: nextTick

vue

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

const message = ref('Hello')

async function updateMessage() {
  message.value = 'Updated!'

  // ✅ Дочекайтеся оновлення DOM
  await nextTick()

  console.log(document.getElementById('msg')?.textContent)
  // Показує: "Updated!"
}
</script>

Синтаксис зворотного виклику

vue

<script setup>
import { nextTick } from 'vue'

function doSomething() {
  // Зміна стану...
  count.value++

  // Зворотний виклик виконується після оновлення DOM
  nextTick(() => {
    // DOM тепер оновлено
    scrollToBottom()
  })
}
</script>

Загальні випадки використання

Автопрокрутка донизу

vue

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

const messages = ref<string[]>([])
const chatContainer = ref<HTMLElement | null>(null)

async function addMessage(text: string) {
  messages.value.push(text)

  await nextTick()
  // Тепер нове повідомлення в DOM
  chatContainer.value?.scrollTo({
    top: chatContainer.value.scrollHeight,
    behavior: 'smooth'
  })
}
</script>

Фокус після відображення вводу

vue

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

const isEditing = ref(false)
const inputRef = ref<HTMLInputElement | null>(null)

async function startEditing() {
  isEditing.value = true

  await nextTick()
  // Введення тепер в DOM
  inputRef.value?.focus()
}
</script>

<template>
  <span v-if="!isEditing" @click="startEditing">{{ text }}</span>
  <input v-else ref="inputRef" v-model="text" />
</template>

Вимірювання елемента після оновлення

vue

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

const items = ref([1, 2, 3])
const listRef = ref<HTMLElement | null>(null)

watch(items, async () => {
  await nextTick()
  // Вимірювання оновленого списку
  const height = listRef.value?.offsetHeight
  console.log('Висота списку:', height)
}, { deep: true })
</script>

Як Vue групує оновлення

typescript

// Vue групує кілька змін стану в одне оновлення DOM
count.value = 1  // У черзі
count.value = 2  // У черзі (перезаписує попереднє)
count.value = 3  // У черзі (перезаписує попереднє)
// DOM оновлюється ОДИН РАЗ з count = 3

await nextTick()
// DOM тепер оновлено

Важливо:

nextTick дозволяє вам виконати код після того, як Vue оновив DOM. Використовуйте його, коли потрібно прочитати стан DOM, сфокусувати елементи, прокрутити або виміряти розміри відразу після реактивної зміни. Він повертає Promise, тому ви можете await його. Найчастіше потрібен для: автопрокрутки, фокусування вводу після умовного рендерингу та вимірювання розмірів елементів.

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

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

Premium

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

Дочитали статтю?

Практика завдань