Kada naudotumėte render funkcijas arba JSX vietoj šablonų?

Question

IT Interview Practice · Accepted Answer

Vue šablonai yra kompiliuojami į **render funkcijas**, kurios grąžina virtualią DOM. Paprastai rašote šablonus, bet galite rašyti render funkciją (arba JSX) tiesiogiai, kai jums reikia **pilnos JavaScript galios** norint programiškai generuoti UI. ## Render funkcija ```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)` imperiatyviai kuria vnodes. Čia antraštės lygis apskaičiuojamas vykdymo metu, norint pasirinkti `h1`–`h6` — nepatogu su šablono sintakse. ## JSX (su Vue JSX įskiepiu) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX leidžia naudoti grynąjį JS (`.map`, sąlygas, kintamuosius) medžiui sudaryti — pažįstama React kūrėjams ir lankstesnė dinamiškoms struktūroms. ## Kada render funkcijos / JSX yra verti ```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 ``` ## Kada laikytis šablonų (numatytoji reikšmė) ```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 ``` Žymėtina, kad šablono kompiliatorius prideda našumo optimizacijas (žino, kas statinis, o kas dinaminis), kurių rankiniu būdu parašytos render funkcijos automatiniu būdu negauna. ## Kodėl tai svarbu Šablonai yra teisingas numatytasis variantas — skaitomi, į įrankius patogūs ir kompiliatoriumi optimizuoti. Tačiau render funkcijos/JSX yra pabėgimo liukas, kai UI turi būti generuojama programiškai (dinaminės žymos, rekursiniai medžiai, bibliotekos komponentai), kur šablono sintaksė tampa sudėtinga. Žinojimas, kad abu egzistuoja — ir kad šablonai yra pirmenybė tipiniam programėlės kodui, o render funkcijos tinka dinaminėms/bibliotekos scenarijams — leidžia pasirinkti tinkamą įrankį be priespaudos naudoti vieną metodą visur.

Render funkcija

JSX (su Vue JSX įskiepiu)

Kada render funkcijos / JSX yra verti

Kada laikytis šablonų (numatytoji reikšmė)

Kodėl tai svarbu

Susiję klausimai