Bilakah anda akan menggunakan render function atau JSX dan bukannya templat?

Question

Accepted Answer

Templat Vue dikompil menjadi **render function** yang memulangkan virtual DOM. Biasanya anda menulis templat, tetapi anda boleh menulis render function (atau JSX) secara langsung apabila anda memerlukan **kuasa penuh JavaScript** untuk menjana UI secara programatik. ## 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)` membina vnode secara imperatif. Di sini paras tajuk dikira semasa runtime untuk memilih `h1`–`h6` — janggal dengan sintaks templat. ## JSX (dengan plugin Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX membolehkan anda menggunakan JS biasa (`.map`, syarat, pemboleh ubah) untuk membina pepohon — biasa kepada pembangun React dan lebih fleksibel untuk struktur yang sangat dinamik. ## Bilakah render function / JSX berbaloi ```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 ``` ## Bilakah perlu kekal dengan templat (lalai) ```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 ``` Yang ketara, pengkompil templat menambah pengoptimuman prestasi (ia tahu apa yang statik berbanding dinamik) yang tidak diperoleh secara automatik oleh render function yang ditulis tangan. ## Mengapa ia penting Templat ialah lalai yang betul — boleh dibaca, mesra-tooling, dan dioptimumkan-pengkompil. Tetapi render function/JSX ialah escape hatch apabila UI mesti dijana secara programatik (tag dinamik, pepohon rekursif, komponen pustaka) di mana sintaks templat menjadi berbelit. Mengetahui kedua-duanya wujud — dan bahawa templat diutamakan untuk kod aplikasi biasa manakala render function sesuai untuk senario dinamik/pustaka — membolehkan anda memilih alat yang betul tanpa memaksa satu pendekatan di mana-mana.