Render işlevlerini veya JSX'i şablonlar yerine ne zaman kullanırsınız?

Question

Accepted Answer

Vue şablonları, virtual DOM döndüren **render işlevlerine** derlenir. Genellikle şablonlar yazarsınız, ancak UI'yi programlı olarak oluşturmak için **JavaScript'in tam gücüne** ihtiyaç duyduğunuzda, render işlevini (veya JSX'i) doğrudan yazabilirsiniz. ## Bir render işlevi ```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)` vnodes'ları zorunlu olarak oluşturur. Burada başlık düzeyi `h1`–`h6` seçmek için çalışma zamanında hesaplanır — şablon söz dizimiyle garip olur. ## JSX (Vue JSX eklentisiyle) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX, ağacı oluşturmak için sade JS (`.map`, koşullar, değişkenler) kullanmanızı sağlar — React geliştiricilerine tanıdık ve çok dinamik yapılar için daha esnek. ## Render işlevlerinin / JSX'in değerli olduğu durumlar ```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 ``` ## Şablonlara sadık kalınması gereken durumlar (varsayılan) ```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 ``` Dikkate değer olan şey, şablon derleyicisinin performans optimizasyonları eklediğidir (statik olanı dinamiğe karşı bilir) ve el ile yazılan render işlevleri bunu otomatik olarak elde etmez. ## Neden önemli Şablonlar doğru varsayılandır — okunabilir, araç dostu ve derleyici tarafından optimize edilmiş. Ancak render işlevleri/JSX, UI'nin programlı olarak oluşturulması gerektiğinde (dinamik etiketler, yinelemeli ağaçlar, kütüphane bileşenleri) çıkış yoludur; burada şablon söz dizimi karmaşık hale gelir. Her ikisinin de var olduğunu bilmek — ve şablonların tipik uygulama kodu için tercih edilirken render işlevlerinin dinamik/kütüphane senaryoları için uygun olduğunu bilmek — her yerde tek bir yaklaşımı zorlamadan doğru aracı seçmenizi sağlar.