Cansu Arı Logo
Blog
Nedir?

nextTick() Neden Var ve Gerçekten Ne Yapar?

Vue'da DOM güncellemeleri anında yapılmaz; batch'lenir. nextTick(), bu asenkron güncellemeleri yakalayıp doğru zamanda işlem yapmanı sağlar.

  • #Vue.js
Skip to content

nextTick() nasıl çalışıyor?

Vue’nun reaktivite sistemi hızlıdır ama anında değildir. Evet, bir değişkeni güncellediğinde ekranda hemen değişiklik görürsün; ama aslında Vue bu işlemleri toplu (batched) şekilde işler. İşte bu nedenle, bazen DOM henüz güncellenmeden kodun çalışır.

Tam bu durumda devreye Vue’nun gizli kahramanı girer: nextTick()

Basit Tanım

nextTick() fonksiyonu, Vue'nun bir sonraki DOM güncelleme döngüsü tamamlandığında çalıştırılacak bir callback tanımlamana izin verir. Yani: “Vue DOM’u güncellesin, sonra şunu yap.” demenin kısa yoludur.
import { nextTick, ref } from 'vue'

const show = ref(false)

function toggleModal() {
  show.value = !show.value
  nextTick(() => {
    console.log('DOM artık güncellendi!')
  })
}

Burada show.value değiştiğinde Vue, DOM’u hemen değil, bir sonraki render döngüsünde günceller. Eğer hemen ardından DOM ölçümü (örneğin getBoundingClientRect()) yaparsan, eski DOM değerlerini görürsün. İşte nextTick() bunu önler.

Vue Neden DOM Güncellemelerini Erteliyor?

Vue, reaktivite sisteminde değişiklikleri anında değil, toplu olarak işler. Bu sayede gereksiz tekrar render’ları önler. Örneğin:
count.value++
message.value = 'Merhaba'
İki değişiklik de tek bir render döngüsünde işlenir. Eğer Vue her biri için DOM güncellemesi yapsaydı, sayfa yavaşlardı. Yani nextTick() sana “bu toplu işlemler bittiğinde” bir nokta sağlar.

Kısaca: nextTick() = “Render bittikten sonra görüşürüz.”

Gerçekte Ne Oluyor?

Vue, kendi içinde Microtask Queue (örneğin Promise.resolve().then(...)) kullanır. Yani nextTick() çağrısı, JavaScript’in event loop mekanizmasında bir sonraki microtask olarak sıraya alınır.

Bu nedenle setTimeout(fn, 0) ile benzer görünse de, nextTick() çok daha hassas zamanlamaya sahiptir.

nextTick(() => console.log('Microtask sonrası'))
setTimeout(() => console.log('Macrotask sonrası'))
console.log('Anında log')
// Çıktı:
// Anında log
// Microtask sonrası
// Macrotask sonrası

Bu fark, performans açısından kritiktir. Çünkü nextTick(), Vue’nun DOM batch işlemi tamamlanır tamamlanmaz çalışır.

Gerçek Hayat Senaryosu

Örneğin bir animasyonu tetiklemek istiyorsun:
<template>
  <div ref="box" class="box"></div>
</template>

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

const box = ref(null)
const visible = ref(false)

function animateBox() {
  visible.value = true
  nextTick(() => {
    box.value.classList.add('fade-in')
  })
}
</script>

<style>
.box { opacity: 0; transition: opacity .5s; }
.box.fade-in { opacity: 1; }
</style>
Burada visible.value = true yazdıktan hemen sonra class eklemeye kalkarsan, element henüz DOM’da olmayabilir. nextTick() bekletir ve animasyonun sorunsuz başlamasını sağlar.

nextTick() Ne Zaman Kullanılır?

DurumAçıklama
DOM ölçümü yapılacaksaElementin gerçek boyutuna erişmek için
Animasyon tetiklenecekseElement DOM’a eklendikten sonra class eklemek için
Üçüncü parti kütüphanelerle (örneğin Chart.js) render sonrası işlem yapılacaksaGrafik veya harita gibi bileşenler ekranda oluşmadan init etmeye çalışmak hata verir
Dinamik liste güncellemesi sonrası scroll veya focus işlemleri yapılacaksaListe güncellenmeden scroll hedefini bulamazsın

await nextTick

Vue 3 ile birlikte nextTick() promisify edildi. Yani callback vermek zorunda değilsin; await ile de kullanabilirsin:
show.value = true
await nextTick()
console.log('DOM güncellendi, artık güvenle ölçebilirim!')
Bu, özellikle async/await ile çalışan setup fonksiyonlarında çok temiz bir yazım sağlar.

Dikkat Edilmesi Gerekenler

  1. Her değişiklikten sonra nextTick() kullanmak gereksizdir -- Vue zaten reaktif güncellemeleri otomatik yönetir.
  2. nextTick() sadece Vue içindeki reactive güncellemeleri bekler. Harici DOM manipülasyonları (örneğin dış kütüphanelerle yapılan değişiklikler) için ayrı bir bekleme gerekebilir.
  3. await nextTick() sadece Vue lifecycle’ı içindeyken anlamlıdır -- setup dışında çağırırsan çalışmayabilir.

Vue Lifecycle ve nextTick

nextTick() özellikle onMounted ve onUpdated hook’larıyla birlikte çok kullanılır.
onMounted(async () => {
  await nextTick()
  console.log('Bileşen render edildi!')
})
Bu, bileşen DOM’a eklendikten hemen sonra bir ölçüm veya odaklama işlemi yapmanı sağlar.

Sonuç

Vue’nun reaktivite sistemi DOM güncellemelerini optimize ederken geciktirir -- bu, performansın gizli sırrıdır. Ama bazen bizim, bu güncellemelerin bitmesini beklememiz gerekir. İşte nextTick() tam burada devreye girer.

Kısaca:

  • nextTick() → “Vue DOM’u bitirsin, sonra devam et.”
  • Microtask seviyesinde, ultra hızlı zamanlama
  • DOM ölçümleri, animasyonlar, third-party init işlemleri için mükemmel çözüm

Vue’nun nextTick() fonksiyonu, saniyeler değil, milisaniyelerle oynayan bir “göz kırpma” optimizasyonudur.

All tags
  • Vue.js
Prev
Next