Render Functions — Vue

h() Function Alternatif template — berguna untuk komponen yang sangat dinamis: import { h } from "vue" function render() { return h("div", { id: "app" }, […

Template yang kamu tulis gak langsung jadi HTML. Vue lebih dulu meng-compile-nya jadi render function: fungsi JavaScript yang mengembalikan gambaran apa yang harus digambar. Render function itu bisa juga kamu tulis sendiri dengan fungsi h(). Di pelajaran template, template diibaratkan nota yang sudah dicetak di Warung Bu Sri, tinggal diisi titik-titiknya. Render function adalah nota yang ditulis tangan baris demi baris: hasilnya sama, kebebasannya penuh (berapa baris, judulnya sebesar apa, semua bisa diputuskan sambil menulis), tapi kerjanya lebih banyak.

🧪 Tebakan cepat: h("h3", "Nasi Goreng") dijalankan di script. Apakah baris itu langsung membuat elemen <h3> di halaman? Tebak dulu, jawabannya ada di bagian "h(): membuat vnode".

Template di-compile jadi render function

Template ini:

<h3 class="judul">{{ nama }}</h3>

kira-kira menjadi fungsi ini:

() => h("h3", { class: "judul" }, nama)

Di proyek Vite, plugin Vue yang melakukannya saat build. Di editor latihan, compiler-nya jalan di browser. Setiap kali datanya berubah, Vue memanggil fungsi itu lagi dan membandingkan hasil baru dengan yang lama.

h(): membuat vnode

h(type, props, children):

Argumen	Contoh	Artinya
`type`	`"div"`, `"h3"`, `MenuCard`	tag HTML, atau sebuah komponen
`props`	`{ class: "kartu", onClick: fn }`	atribut, props, dan listener
`children`	`"Rp15000"` atau `[h(...), h(...)]`	teks, atau array vnode lain

props boleh dilewati kalau gak ada: h("h1", "Judul").
Listener ditulis on + nama event berhuruf besar: onClick, onTambah.
Hasil h() adalah vnode (virtual node): objek JavaScript biasa yang menggambarkan elemen. h("h3", { class: "judul" }, "Nasi Goreng") menghasilkan objek dengan type: "h3", props: { class: "judul" }, children: "Nasi Goreng", dan el: null.

el masih null karena belum ada elemen DOM apa pun. h() cuma membuat gambarannya; Vue yang nanti membuat <h3> sungguhan saat merender. Itu jawaban tebakannya.

MenuCard dengan h()

// MenuCard.js
import { h } from "vue"

export default {
  props: { nama: String, harga: Number, stok: Number },
  emits: ["tambah"],
  setup(props, { emit }) {
    return () =>
      h("div", { class: "kartu" }, [
        h("h3", props.nama),
        h("p", "Rp" + props.harga),
        props.stok > 0
          ? h("button", { onClick: () => emit("tambah", props.nama, props.harga) }, "Tambah")
          : h("span", { class: "habis" }, "Habis"),
      ])
  },
}

Dipasang dengan	HTML yang keluar
`nama="Nasi Goreng" :harga="15000" :stok="8"`	`<div class="kartu"><h3>Nasi Goreng</h3><p>Rp15000</p><button>Tambah</button></div>`
`nama="Mie Ayam" :harga="12000" :stok="0"`	`<div class="kartu"><h3>Mie Ayam</h3><p>Rp12000</p><span class="habis">Habis</span></div>`

setup mengembalikan fungsi, dan fungsi itulah render function-nya. Vue memanggilnya di setiap render.
Props dibaca di dalam fungsi itu, props.nama, supaya setiap render memakai nilai terbaru.
v-if jadi operator ? :, dan @click jadi onClick. Klik Tambah memanggil emit("tambah", ...), persis seperti di pelajaran emits.

Di template	Di render function
`{{ nama }}`	`props.nama` sebagai children
`v-if` / `v-else`	`kondisi ? h(...) : h(...)`
`v-for="m in menu" :key="m.id"`	`menu.map((m) => h("li", { key: m.id }, m.nama))`
`@click="..."`	`onClick: () => ...`
`:class="{ habis: stok === 0 }"`	`class: { habis: props.stok === 0 }`
`<slot />`	`slots.default?.()`, dari `setup(props, { slots })`

Kapan render function sepadan

Hampir selalu, template cukup. Template juga lebih cepat dibaca, dan compiler-nya menandai bagian yang gak pernah berubah, jadi Vue cuma memeriksa bagian dinamis saat update. Render function tulisan tangan gak mendapat tanda itu otomatis.
Render function sepadan saat bentuk komponennya ditentukan logika yang rumit: tabel generik yang kolom dan isi selnya datang dari konfigurasi, atau komponen library yang membaca dan membungkus setiap anak dari slot-nya.
Tag dinamis saja belum alasan. Heading yang level-nya dari data cukup ditulis di template dengan <component :is="'h' + level">. Itu latihan kedua.
Vue juga mendukung JSX lewat plugin @vitejs/plugin-vue-jsx; hasil compile-nya sama-sama pemanggilan pembuat vnode.

Di editor latihan

h gak disediakan editor, dan baris import membuat semuanya gagal. Ambil dari objek Vue: const { h } = Vue. Komponennya ditulis sebagai objek, lalu dipasang dengan <component :is>:

const { h } = Vue

const MenuCard = {
  props: { nama: String, harga: Number, stok: Number },
  setup(props) {
    return () =>
      h("div", { class: "kartu" }, [
        h("h3", props.nama),
        h("p", "Rp" + props.harga),
      ])
  },
}

---template---
<div>
  <component :is="MenuCard" nama="Nasi Goreng" :harga="15000" :stok="8" />
  <component :is="MenuCard" nama="Es Teh" :harga="5000" :stok="20" />
</div>

Latihan pertama memakai bentuk ini: App yang setup()-nya mengembalikan () => h("div", { id: "app" }, [h("h1", "Judul"), h("p", "Dibuat dengan Vue")]), dan template cuma <component :is="App" />. Pemeriksanya mencari h("h1" dan h("p" di kodemu, dan menolak <h1> atau <p> yang ditulis di template.
Latihan kedua: const level = ref(2), const tag = computed(() => "h" + level.value), lalu <component :is="tag" id="heading">Heading Level {{ level }}</component>. Hasilnya <h2 id="heading">Heading Level 2</h2>.

⚠️ Jebakan yang sering ketemu

Mengembalikan vnode langsung dari setup. setup() { return h("p", "Halo") } gak merender apa-apa. Build development menulis [Vue warn]: setup() should not return VNodes directly - return a render function instead. Kembalikan fungsinya: return () => h("p", "Halo").
Listener ditulis gaya template. { "@click": fn } bukan listener; dia jadi atribut biasa, dan klik gak menjalankan apa-apa. Tulis onClick.
Membaca props di luar render function. const nama = props.nama di setup cuma dibaca sekali, jadi kartunya gak ikut berubah saat prop-nya berubah. Baca props.nama di dalam fungsi yang dikembalikan.
Lupa const { h } = Vue di editor. Render-nya gagal dengan h is not defined.
Teks dan keyword di latihan. h1 harus Judul dan p harus Dibuat dengan Vue, keduanya dari h(). #heading harus Heading Level 2, dan kode latihan kedua memuat component dan :is.

TL;DR: Vue meng-compile setiap template jadi render function, dan kamu bisa menulisnya sendiri dengan h(type, props, children). h() cuma membuat vnode, objek yang menggambarkan elemen; Vue yang membuat DOM-nya saat merender. Di komponen, setup mengembalikan fungsi () => h(...), props dibaca di dalam fungsi itu, v-if jadi ? :, v-for jadi .map(), dan @click jadi onClick. Template cukup untuk hampir semua komponen dan dapat optimasi compiler; render function sepadan saat bentuk komponennya ditentukan logika yang rumit. Tag dinamis cukup dengan <component :is>. Di editor latihan, ambil h dengan const { h } = Vue.