Render Function Nedir?

Render function (render fonksiyonu), bir bileşenin ekranda nasıl görüneceğini şablon (template) yerine JavaScript ile tanımlamanın yoludur. Vue'da şablonlar derleme sırasında zaten render fonksiyonlarına dönüştürülür; render fonksiyonu yazmak, bu adımı elle yapmak demektir.

h() fonksiyonu

Vue'da render fonksiyonları h() ile sanal DOM düğümleri (VNode) üretir. h(etiket, öznitelikler, çocuklar) şeklinde çağrılır:

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

const Counter = {
  setup() {
    const count = ref(0);
    // setup bir fonksiyon döndürürse bu fonksiyon render fonksiyonu olur
    return () =>
      h('div', [
        h('p', `Sayaç: ${count.value}`),
        h('button', { onClick: () => count.value++ }, 'Artır'),
      ]);
  },
};

createApp(Counter).mount('#app');

Bu bileşen, şablonla yazılmış bir sayaçla aynı sonucu verir. Reaktif count değiştiğinde render fonksiyonu yeniden çalışır ve Vue yalnızca değişen kısmı DOM'da günceller.

Ne zaman kullanılır?

• Çıktının yapısı çok dinamik olduğunda (ör. seviyesi parametreyle belirlenen bir başlık: h1–h6).
• Kütüphane bileşenleri yazarken slotları ve VNode'ları programatik olarak işlemek gerektiğinde.
• JSX tercih edildiğinde (Vue, Babel veya Vite eklentisiyle JSX'i de destekler).

Çoğu bileşen için şablonlar daha okunurdur ve derleyici optimizasyonlarından daha fazla yararlanır; bu yüzden render fonksiyonları genellikle özel durumlar için tercih edilir.

Not: React'te de benzer bir kavram vardır: sınıf bileşenlerinin render() metodu ve fonksiyon bileşenlerinin döndürdüğü JSX, ekranda gösterilecek elemanları tanımlar.