Milloin käyttäisit render-funktioita tai JSX:ää mallineiden sijaan?

Question

Accepted Answer

Vue-mallineet käännetään **render-funktioiksi**, jotka palauttavat virtual DOM:in. Yleensä kirjoitat mallinnuksia, mutta voit kirjoittaa render-funktion (tai JSX:ää) suoraan, kun tarvitset **JavaScriptin täyden voiman** käyttöliittymän ohjelmalliseen luomiseen. ## Render-funktio ```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)` rakentaa vnodeita imperatiivisesti. Tässä otsikon tasoa lasketaan ajon aikana `h1`–`h6` valitsemiseksi — hankalaa mallinnuksen syntaksilla. ## JSX (Vue JSX -laajennuksen kanssa) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX antaa sinun käyttää tavallista JS:ää (`.map`, ehtolauseet, muuttujat) puun rakentamiseen — tuttu React-kehittäjille ja joustavampi erittäin dynaamisille rakenteille. ## Kun render-funktiot / JSX kannattavat ```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 ``` ## Kun pysyä mallinuksissa (oletusarvo) ```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 ``` Huomaa, että mallinnus-kääntäjä lisää suorituskyvyn optimoinnit (se tietää mikä on staattista vai dynaamista), joita käsin kirjoitetut render-funktiot eivät saa automaattisesti. ## Miksi tämä on tärkeää Mallinukset ovat oikea oletusvalinta — luettavat, työkaluystävälliset ja kääntäjän optimoidut. Mutta render-funktiot/JSX ovat pääsy ulos, kun käyttöliittymä on luotava ohjelmallisesti (dynaamiset tagit, rekursiiviset puut, kirjastokomponentit), joissa mallinnuksen syntaksista tulee mutkikas. Tietäminen siitä, että molemmat ovat olemassa — ja että mallinukset ovat ensisijaisia tavallisen sovelluskoodin osalta kun taas render-funktiot sopivat dynaamisiin/kirjaston skenaarioihin — antaa sinulle mahdollisuuden valita oikea työkalu pakottamatta yhtä lähestymistapaa kaikkialla.