Scheduler Nedir?

Vue.js'de scheduler (zamanlayıcı), reaktif veri değiştiğinde yapılacak işleri — bileşenlerin yeniden render edilmesi, watch geri çağrıları — bir kuyrukta toplayan ve uygun anda topluca çalıştıran iç mekanizmadır. Vue, bir değişikliği gördüğü anda DOM'u güncellemez; aynı "tick" içinde yapılan tüm değişiklikleri biriktirir ve DOM'u bir kez günceller.

Neden bir kuyruk?

Bir olay işleyicisinde aynı değeri üç kez değiştirdiğinizi düşünün. Her değişiklikte DOM güncellenseydi gereksiz yere üç kez render yapılırdı. Scheduler bu işleri tekilleştirir: her bileşen bir tick içinde en fazla bir kez yeniden render edilir.

nextTick

Bu yüzden bir değeri değiştirdikten hemen sonra DOM henüz eski halindedir. DOM'un güncellenmesini beklemek için nextTick kullanılır. Aşağıdaki örneği çalıştırıp düğmeye tıklayın ve konsolu izleyin:

import { createApp, ref, nextTick } from 'vue';

createApp({
  setup() {
    const count = ref(0);

    async function increment() {
      count.value++;
      count.value++;
      count.value++;
      // DOM henüz güncellenmedi: eski değer görünür
      console.log(
        'Değişiklikten hemen sonra:',
        document.getElementById('counter').textContent
      );

      await nextTick();
      // Scheduler kuyruğu işledi: DOM tek seferde güncellendi
      console.log(
        'nextTick sonrasında:',
        document.getElementById('counter').textContent
      );
    }

    return { count, increment };
  },
  template: `
    <p id="counter">{{ count }}</p>
    <button @click="increment">3 kez artır</button>
  `,
}).mount('#app');

watch zamanlaması (flush)

watch ve watchEffect geri çağrılarının ne zaman çalışacağı da scheduler tarafından belirlenir ve flush seçeneğiyle değiştirilebilir:

• 'pre' (varsayılan): Bileşen güncellenmeden önce çalışır.
• 'post': DOM güncellendikten sonra çalışır; güncel DOM'a erişmeniz gerekiyorsa kullanılır (watchPostEffect kısayolu).
• 'sync': Değer değiştiği anda, kuyruğa alınmadan çalışır; performans açısından dikkatli kullanılmalıdır.

Not: Takvim ve etkinlik planlama arayüzleri için kullanılan "scheduler" bileşenleri, Vue'nun bu iç mekanizmasıyla ilgili değildir; bunlar üçüncü taraf kütüphanelerdir.