Kapan Anda akan menggunakan render functions atau JSX daripada templates?

Question

Accepted Answer

Template Vue dikompilasi ke **render functions** yang mengembalikan virtual DOM. Biasanya Anda menulis templates, tetapi Anda dapat menulis render function (atau JSX) secara langsung ketika Anda membutuhkan **kekuatan penuh JavaScript** untuk menghasilkan UI secara pemrograman. ## Sebuah render function ```js import { h } from "vue"; // h = hyperscript: creates a virtual DOM node export default { props: ["level"], setup(props, { slots }) { // dynamically choose the tag — hard to express in a template return () => h(`h${props.level}`, slots.default()); // → renders an

}, }; ``` `h(tag, props, children)` membangun vnodes secara imperatif. Di sini level heading dihitung pada runtime untuk memilih `h1`–`h6` — canggung dengan sintaks template. ## JSX (dengan Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX memungkinkan Anda menggunakan JS murni (`.map`, conditional, variabel) untuk membangun tree — familiar bagi developer React dan lebih fleksibel untuk struktur yang sangat dinamis. ## Saat render functions / JSX layak digunakan ```text ✓ Programmatic structure: a tag/component decided at runtime (dynamic headings, schema-driven UI) ✓ Highly conditional or recursive rendering hard to express with v-if/v-for ✓ Building reusable component libraries / higher-order components ✓ Rendering based on complex JS logic where template directives feel clumsy ``` ## Saat tetap menggunakan templates (default) ```text ✓ Almost all app UI — templates are more readable, optimized by the compiler, and benefit from compile-time hints (static hoisting, patch flags) for performance ✓ Better tooling: IDE highlighting, type-checking, easier for the whole team ``` Penting dicatat, compiler template menambahkan optimasi performa (tahu apa yang static vs dynamic) yang render functions yang ditulis tangan tidak dapatkan secara otomatis. ## Mengapa ini penting Template adalah default yang tepat — dapat dibaca, ramah tools, dan dioptimalkan compiler. Namun render functions/JSX adalah jalan keluar ketika UI harus dihasilkan secara pemrograman (tag dinamis, pohon rekursif, komponen library) di mana sintaks template menjadi rumit. Mengetahui kedua-duanya ada — dan templates disukai untuk kode aplikasi khas sementara render functions cocok untuk skenario dinamis/library — memungkinkan Anda memilih tool yang tepat tanpa memaksakan satu pendekatan di mana-mana.