{"id":43331,"date":"2026-07-14T17:01:34","date_gmt":"2026-07-14T14:01:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=43331"},"modified":"2026-07-14T17:02:04","modified_gmt":"2026-07-14T14:02:04","slug":"vue-jste-fonksiyonel-bilesenleri-render-etme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/","title":{"rendered":"Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme"},"content":{"rendered":"<h2>Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme<\/h2>\n<p>Vue.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netilebilir ve yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmay\u0131 kolayla\u015ft\u0131r\u0131r. Vue bile\u015fenleri genellikle durum (state), ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131 (lifecycle hooks), y\u00f6ntemler (methods) ve hesaplanm\u0131\u015f \u00f6zellikler (computed properties) gibi zengin \u00f6zellik setleriyle gelir. Ancak, baz\u0131 durumlarda bu zenginlik gereksiz bir y\u00fck olu\u015fturabilir. \u0130\u015fte bu noktada &#8220;fonksiyonel bile\u015fenler&#8221; devreye girer.<\/p>\n<p>Fonksiyonel bile\u015fenler, Vue.js&#8217;in sundu\u011fu hafif, durumsuz ve \u00f6rnek (instance) i\u00e7ermeyen bile\u015fenlerdir. Temel ama\u00e7lar\u0131, yaln\u0131zca kendilerine iletilen \u00f6zelliklere (props) dayanarak \u00e7\u0131kt\u0131 render etmek ve herhangi bir i\u00e7 durum veya ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi yapmamakt\u0131r. Bu \u00f6zellikleri sayesinde, \u00f6zellikle performans\u0131n kritik oldu\u011fu veya bile\u015fenin yaln\u0131zca g\u00f6rsel bir sunum g\u00f6revi g\u00f6rd\u00fc\u011f\u00fc senaryolarda \u00f6nemli avantajlar sunarlar. Bu makalede, Vue.js&#8217;te fonksiyonel bile\u015fenlerin ne oldu\u011funu, nas\u0131l olu\u015fturuldu\u011funu, hangi durumlarda kullan\u0131lmalar\u0131 gerekti\u011fini ve Vue 2 ile Vue 3 aras\u0131ndaki farkl\u0131l\u0131klar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h2>Vue.js&#8217;te Fonksiyonel Bile\u015fenlere Genel Bak\u0131\u015f<\/h2>\n<p>Geleneksel Vue bile\u015fenleri, bir Vue \u00f6rne\u011fi (instance) olu\u015fturur. Bu \u00f6rnek, bile\u015fenin <code>data<\/code>, <code>methods<\/code>, <code>computed<\/code>, <code>watch<\/code> gibi se\u00e7eneklerini ve ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 y\u00f6netir. Bu durum, bile\u015fenin karma\u015f\u0131k etkile\u015fimler ve durum y\u00f6netimi gerektiren senaryolarda son derece g\u00fc\u00e7l\u00fc olmas\u0131n\u0131 sa\u011flar. Ancak, bir bile\u015fenin sadece veri al\u0131p onu belirli bir \u015fekilde g\u00f6r\u00fcnt\u00fclemesi gerekti\u011finde, bu Vue \u00f6rne\u011finin olu\u015fturulmas\u0131 ve y\u00f6netilmesi performans a\u00e7\u0131s\u0131ndan gereksiz bir ek y\u00fck getirebilir.<\/p>\n<p>Fonksiyonel bile\u015fenler, bu ek y\u00fck\u00fc ortadan kald\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bir fonksiyonel bile\u015fen:<br \/>\n*   <strong>Durumsuzdur (Stateless):<\/strong> Kendi <code>data<\/code> veya <code>state<\/code> \u00f6zelliklerine sahip de\u011fildir.<br \/>\n*   <strong>\u00d6rneksizdir (Instance-less):<\/strong> Bir Vue \u00f6rne\u011fi olu\u015fturmaz. Bu, ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131na (\u00f6rne\u011fin <code>mounted<\/code>, <code>created<\/code>) eri\u015femedi\u011fi anlam\u0131na gelir.<br \/>\n*   <strong>Yaln\u0131zca Props Tabanl\u0131d\u0131r:<\/strong> Yaln\u0131zca kendisine iletilen <code>props<\/code> de\u011ferlerini kullanarak \u00e7\u0131kt\u0131 render eder.<br \/>\n*   <strong>Render Fonksiyonu Kullan\u0131r:<\/strong> Bir <code><template><\/code> blo\u011fu yerine bir <code>render<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla sanal DOM d\u00fc\u011f\u00fcmlerini (VNodes) d\u00f6nd\u00fcr\u00fcr.<\/p>\n<p>Bu \u00f6zellikler, fonksiyonel bile\u015fenleri saf fonksiyonlara benzer k\u0131lar: ayn\u0131 girdiyi (props) ald\u0131klar\u0131nda her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretirler ve hi\u00e7bir yan etkiye sahip de\u011fillerdir.<\/p>\n<h3>Fonksiyonel Bile\u015fenlerin Avantajlar\u0131<\/h3>\n<p>Fonksiyonel bile\u015fenler, belirli senaryolarda geleneksel bile\u015fenlere g\u00f6re \u00f6nemli avantajlar sunar:<\/p>\n<p>*   <strong>Performans:<\/strong> Bir Vue \u00f6rne\u011fi olu\u015fturulmad\u0131\u011f\u0131 i\u00e7in, ba\u015flatma maliyeti (initialization overhead) ve bellek t\u00fcketimi \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r. Bu, \u00f6zellikle binlerce k\u00fc\u00e7\u00fck, g\u00f6rsel bile\u015fenin ayn\u0131 anda render edilmesi gereken b\u00fcy\u00fck listelerde veya tablolarda belirgin performans iyile\u015ftirmeleri sa\u011flayabilir. Render s\u00fcresi daha k\u0131sad\u0131r \u00e7\u00fcnk\u00fc Vue&#8217;nin reaktivite sistemi ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi atlan\u0131r.<br \/>\n*   <strong>Basitlik ve Okunabilirlik:<\/strong> Durum ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi olmad\u0131\u011f\u0131 i\u00e7in kod daha basittir ve okunabilirli\u011fi artar. Bile\u015fen sadece ald\u0131\u011f\u0131 veriyi nas\u0131l g\u00f6sterece\u011fini tan\u0131mlar. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck, atomik UI elemanlar\u0131 i\u00e7in idealdir.<br \/>\n*   <strong>Daha Az Bellek Kullan\u0131m\u0131:<\/strong> Her bir fonksiyonel bile\u015fen i\u00e7in bir Vue \u00f6rne\u011fi olu\u015fturulmad\u0131\u011f\u0131ndan, uygulaman\u0131n genel bellek ayak izi azal\u0131r. Bu, \u00f6zellikle bellek k\u0131s\u0131tl\u0131 ortamlar veya \u00e7ok say\u0131da bile\u015fenin kullan\u0131ld\u0131\u011f\u0131 uygulamalar i\u00e7in \u00f6nemlidir.<br \/>\n*   <strong>Daha Kolay Test Edilebilirlik:<\/strong> Durumsuz olduklar\u0131 i\u00e7in, fonksiyonel bile\u015fenler daha kolay test edilebilir. Sadece belirli props&#8217;lar verildi\u011finde do\u011fru \u00e7\u0131kt\u0131y\u0131 \u00fcretip \u00fcretmedi\u011fini kontrol etmek yeterlidir. Yan etkileri yoktur ve i\u00e7 durumlar\u0131 y\u00f6netme karma\u015fas\u0131 bulunmaz.<\/p>\n<h2>Fonksiyonel Bile\u015fen Olu\u015fturma: Temel S\u00f6zdizimi<\/h2>\n<p>Vue 2&#8217;de fonksiyonel bir bile\u015fen olu\u015fturmak i\u00e7in, bile\u015fen tan\u0131m nesnesine <code>functional: true<\/code> \u00f6zelli\u011fini eklemeniz gerekir. Ard\u0131ndan, bir <code>render<\/code> fonksiyonu sa\u011flaman\u0131z gerekir. Bu <code>render<\/code> fonksiyonu, iki arg\u00fcman al\u0131r: <code>h<\/code> (veya <code>createElement<\/code>) ve <code>context<\/code>.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Vue 2 Fonksiyonel Bile\u015fen \u00d6rne\u011fi\nexport default {\n  functional: true, \/\/ Bu, bile\u015fenin fonksiyonel oldu\u011funu belirtir\n  props: {\n    message: {\n      type: String,\n      required: true\n    },\n    variant: {\n      type: String,\n      default: 'info'\n    }\n  },\n  \/\/ render fonksiyonu, h (createElement) ve context arg\u00fcmanlar\u0131n\u0131 al\u0131r\n  render(h, context) {\n    \/\/ context.props: bile\u015fene iletilen props'lar\n    \/\/ context.children: slot i\u00e7eri\u011fi\n    \/\/ context.data: v-bind, v-on, class, style gibi render fonksiyonu se\u00e7enekleri\n    const { message, variant } = context.props;\n    const { children, data } = context;\n\n    return h(\n      'div',\n      {\n        ...data, \/\/ data nesnesindeki attrs, class, style, on gibi \u00f6zellikler buraya yay\u0131l\u0131r\n        class: ['functional-alert', <code>functional-alert--${variant}<\/code>, data.class]\n      },\n      [\n        h('span', message),\n        children \/\/ Slot i\u00e7eri\u011fini render et\n      ]\n    );\n  }\n};<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte:<br \/>\n*   <code>functional: true<\/code>, Vue&#8217;ye bu bile\u015fenin bir Vue \u00f6rne\u011fi olu\u015fturmamas\u0131 gerekti\u011fini s\u00f6yler.<br \/>\n*   <code>props<\/code> \u00f6zelli\u011fi, beklenen props&#8217;lar\u0131 tan\u0131mlar. Fonksiyonel bile\u015fenler hala <code>props<\/code> do\u011frulamas\u0131n\u0131 kullanabilir.<br \/>\n*   <code>render<\/code> fonksiyonu, sanal DOM d\u00fc\u011f\u00fcmlerini (VNodes) olu\u015fturmaktan sorumludur.<br \/>\n    *   <code>h<\/code> (veya <code>createElement<\/code>), VNode olu\u015fturmak i\u00e7in kullan\u0131lan bir fonksiyondur. Arg\u00fcmanlar\u0131 s\u0131ras\u0131yla: etiketin ad\u0131 (string) veya bir bile\u015fen tan\u0131m\u0131, veri nesnesi (props, attrs, class, style, olay dinleyicileri vb. i\u00e7erir) ve \u00e7ocuk VNode&#8217;lar (bir dizi veya tek bir VNode) \u015feklindedir.<br \/>\n    *   <code>context<\/code>, fonksiyonel bile\u015fenin t\u00fcm gerekli bilgilerini i\u00e7eren bir nesnedir.<\/p>\n<h3><code>context<\/code> Nesnesini Anlamak (Vue 2)<\/h3>\n<p><code>context<\/code> nesnesi, fonksiyonel bile\u015fenin render i\u015flemi s\u0131ras\u0131nda ihtiya\u00e7 duydu\u011fu t\u00fcm bilgilere eri\u015fim sa\u011flar. Vue 2&#8217;deki <code>context<\/code> nesnesinin temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n<p>*   <strong><code>props<\/code><\/strong>: Bile\u015fene iletilen \u00f6zelliklerin (props) bir nesnesidir. \u00d6rne\u011fin, yukar\u0131daki \u00f6rnekte <code>message<\/code> ve <code>variant<\/code> gibi.<br \/>\n*   <strong><code>children<\/code><\/strong>: Bile\u015fenin slot i\u00e7eri\u011fini temsil eden bir dizi VNode&#8217;dur. Bu, normal bile\u015fenlerde <code><slot><\/code> etiketiyle render edilen i\u00e7eri\u011fe kar\u015f\u0131l\u0131k gelir.<br \/>\n*   <strong><code>data<\/code><\/strong>: Bu, normal bir bile\u015fenin <code>data<\/code> se\u00e7ene\u011fine kar\u015f\u0131l\u0131k gelmez. Bunun yerine, bir bile\u015fenin render fonksiyonu se\u00e7eneklerini i\u00e7eren bir nesnedir. Bu nesne, <code>attrs<\/code> (HTML nitelikleri), <code>class<\/code>, <code>style<\/code>, <code>on<\/code> (olay dinleyicileri), <code>domProps<\/code> (DOM \u00f6zellikleri), <code>scopedSlots<\/code> (kapsaml\u0131 slotlar), <code>slot<\/code> (adland\u0131r\u0131lm\u0131\u015f slot) ve <code>key<\/code> gibi \u00f6zellikleri i\u00e7erebilir. <code>v-bind=\"{ class: 'my-class' }\"<\/code> gibi bir kullan\u0131mda, <code>my-class<\/code> de\u011feri <code>context.data.class<\/code> i\u00e7inde bulunabilir.<br \/>\n*   <strong><code>slots()<\/code><\/strong>: Normal slotlara eri\u015fmek i\u00e7in bir fonksiyondur. Bu fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, adland\u0131r\u0131lm\u0131\u015f slotlar\u0131 i\u00e7eren bir nesne d\u00f6nd\u00fcr\u00fcr. \u00d6rne\u011fin, <code>context.slots().default<\/code> varsay\u0131lan slotu d\u00f6nd\u00fcr\u00fcrken, <code>context.slots().header<\/code> adland\u0131r\u0131lm\u0131\u015f &#8216;header&#8217; slotunu d\u00f6nd\u00fcr\u00fcr.<br \/>\n*   <strong><code>parent<\/code><\/strong>: \u00dcst bile\u015fen \u00f6rne\u011fine bir referanst\u0131r. Nadiren ihtiya\u00e7 duyulur ve genellikle ka\u00e7\u0131n\u0131lmas\u0131 \u00f6nerilir.<br \/>\n*   <strong><code>listeners<\/code><\/strong>: Vue 2&#8217;deki <code>v-on<\/code> dinleyicilerini i\u00e7eren bir nesnedir. \u00d6rne\u011fin, <code><MyComponent @click=\"handleClick\" \/><\/code> durumunda, <code>context.listeners.click<\/code> bir fonksiyon olacakt\u0131r. (Vue 3&#8217;te bu <code>data.on<\/code> i\u00e7ine ta\u015f\u0131nm\u0131\u015ft\u0131r).<\/p>\n<p>Yukar\u0131daki <code>functional-alert<\/code> \u00f6rne\u011finde, <code>data<\/code> nesnesini <code>...data<\/code> ile yayarak, bile\u015fenin \u00fczerine do\u011frudan uygulanan <code>class<\/code>, <code>style<\/code>, <code>attrs<\/code> gibi niteliklerin nihai HTML elementine ge\u00e7mesini sa\u011fl\u0131yoruz.<\/p>\n<p>\/\/ Fonksiyonel bile\u015feni kullanma \u00f6rne\u011fi<br \/>\n<template><\/p>\n<div>\n    <FunctionalAlert message=\"Bu bir bilgilendirme mesaj\u0131d\u0131r.\" variant=\"warning\" class=\"custom-alert\"><\/p>\n<p>Ekstra i\u00e7erik burada.<\/p>\n<p>      <button @click=\"handleButtonClick\">Kapat<\/button><br \/>\n    <\/FunctionalAlert>\n  <\/div>\n<p><\/template><\/p>\n<p>Bu \u00f6rnekte, <code>custom-alert<\/code> s\u0131n\u0131f\u0131 <code>context.data.class<\/code> i\u00e7inde yer alacak ve <code>handleButtonClick<\/code> metodu <code>@click<\/code> olay dinleyicisi olarak <code>context.data.on.click<\/code> i\u00e7inde bulunacakt\u0131r.<\/p>\n<h2><code>h<\/code> (createElement) Fonksiyonu ile Render Etme<\/h2>\n<p><code>h<\/code> fonksiyonu (genellikle <code>createElement<\/code> olarak da adland\u0131r\u0131l\u0131r), Vue&#8217;nin sanal DOM&#8217;u olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131 temel ara\u00e7t\u0131r. Bir VNode (Sanal D\u00fc\u011f\u00fcm) olu\u015fturur. <code>h<\/code> fonksiyonu \u00fc\u00e7 ana arg\u00fcman al\u0131r:<\/p>\n<p>1.  <strong><code>tagOrComponent<\/code> (string | Component | AsyncComponent | Function):<\/strong> Olu\u015fturulacak HTML etiketinin ad\u0131 (\u00f6rne\u011fin, <code>'div'<\/code>, <code>'p'<\/code>, <code>'span'<\/code>) veya ba\u015fka bir Vue bile\u015feninin tan\u0131m\u0131.<br \/>\n2.  <strong><code>data<\/code> (Object):<\/strong> \u0130ste\u011fe ba\u011fl\u0131 bir veri nesnesi. Bu nesne, HTML nitelikleri (<code>attrs<\/code>), DOM \u00f6zellikleri (<code>domProps<\/code>), s\u0131n\u0131flar (<code>class<\/code>), stiller (<code>style<\/code>), olay dinleyicileri (<code>on<\/code>), props&#8217;lar (<code>props<\/code>), key (<code>key<\/code>) ve ref (<code>ref<\/code>) gibi \u00f6zellikleri i\u00e7erir. Fonksiyonel bile\u015fenlerde, bu nesne <code>context.data<\/code>&#8216;ya kar\u015f\u0131l\u0131k gelir.<br \/>\n3.  <strong><code>children<\/code> (string | Array<VNode> | VNode):<\/strong> \u0130ste\u011fe ba\u011fl\u0131 olarak, olu\u015fturulan elementin veya bile\u015fenin \u00e7ocuklar\u0131. Bu bir metin stringi, tek bir VNode veya bir VNode dizisi olabilir.<\/p>\n<p><code>data<\/code> nesnesinin detaylar\u0131:<\/p>\n<p>*   <strong><code>class<\/code> (string | Object | Array):<\/strong> Elemente uygulanacak CSS s\u0131n\u0131flar\u0131. Vue&#8217;nin normal <code>class<\/code> ba\u011flama mekanizmas\u0131yla ayn\u0131 \u015fekilde \u00e7al\u0131\u015f\u0131r.<br \/>\n*   <strong><code>style<\/code> (string | Object | Array):<\/strong> Elemente uygulanacak CSS stilleri. Vue&#8217;nin normal <code>style<\/code> ba\u011flama mekanizmas\u0131yla ayn\u0131 \u015fekilde \u00e7al\u0131\u015f\u0131r.<br \/>\n*   <strong><code>attrs<\/code> (Object):<\/strong> Normal HTML nitelikleri (\u00f6rne\u011fin, <code>id<\/code>, <code>data-testid<\/code>). Bu nitelikler DOM&#8217;a do\u011frudan yans\u0131t\u0131l\u0131r.<br \/>\n*   <strong><code>props<\/code> (Object):<\/strong> E\u011fer <code>tagOrComponent<\/code> bir Vue bile\u015feni ise, bu nesne o bile\u015fene iletilecek props&#8217;lar\u0131 i\u00e7erir. Fonksiyonel bile\u015fenlerde <code>context.props<\/code>&#8216;tan farkl\u0131d\u0131r; <code>context.props<\/code> zaten fonksiyonel bile\u015fenin kendi props&#8217;lar\u0131n\u0131 i\u00e7erirken, <code>data.props<\/code> alt bile\u015fenlere iletilecek props&#8217;lard\u0131r.<br \/>\n*   <strong><code>domProps<\/code> (Object):<\/strong> DOM \u00f6zelliklerini ayarlamak i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, <code>innerHTML<\/code>, <code>value<\/code>).<br \/>\n*   <strong><code>on<\/code> (Object):<\/strong> Olay dinleyicileri. Anahtar, olay ad\u0131 (\u00f6rne\u011fin, <code>click<\/code>, <code>input<\/code>) ve de\u011fer, \u00e7a\u011fr\u0131lacak fonksiyon (veya fonksiyon dizisi) olur. Vue 2&#8217;de <code>context.listeners<\/code>&#8216;a kar\u015f\u0131l\u0131k gelir, ancak Vue 3&#8217;te bu <code>data.on<\/code> i\u00e7ine ta\u015f\u0131nm\u0131\u015ft\u0131r.<br \/>\n*   <strong><code>key<\/code> (string | number):<\/strong> <code>v-for<\/code> listelerinde oldu\u011fu gibi, Vue&#8217;nin bile\u015fenleri veya elementleri izlemesine yard\u0131mc\u0131 olan benzersiz bir anahtar.<br \/>\n*   <strong><code>ref<\/code> (string | VNodeRef):<\/strong> Elemente veya bile\u015fene bir referans almak i\u00e7in kullan\u0131l\u0131r. Fonksiyonel bile\u015fenler \u00f6rnek olu\u015fturmad\u0131\u011f\u0131 i\u00e7in <code>ref<\/code>&#8216;ler do\u011frudan fonksiyonel bile\u015fenin kendisine ba\u011flanamaz, ancak i\u00e7indeki bir DOM elementine ba\u011flanabilir.<br \/>\n*   <strong><code>slot<\/code> (string):<\/strong> Adland\u0131r\u0131lm\u0131\u015f slotlar i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code>scopedSlots<\/code> (Object):<\/strong> Kapsaml\u0131 slotlar i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ h fonksiyonu ile daha karma\u015f\u0131k bir \u00f6rnek\nexport default {\n  functional: true,\n  props: ['level'],\n  render(h, { props, children }) {\n    const headerTag = <code>h${props.level || 1}<\/code>; \/\/ level prop'una g\u00f6re h1, h2, h3 olu\u015ftur\n    return h(\n      headerTag,\n      {\n        class: {\n          'section-title': true,\n          [<code>level-${props.level}<\/code>]: true\n        },\n        style: {\n          color: props.level === 1 ? 'blue' : 'black',\n          fontSize: <code>${2 - (props.level * 0.2)}em<\/code>\n        },\n        attrs: {\n          'data-heading-level': props.level\n        },\n        on: {\n          click: () =&gt; console.log(<code>Ba\u015fl\u0131k ${props.level} t\u0131kland\u0131!<\/code>)\n        }\n      },\n      children \/\/ Ba\u015fl\u0131k i\u00e7eri\u011fini render et\n    );\n  }\n};<\/code><\/pre>\n<p>Bu <code>FunctionalHeading<\/code> bile\u015feni, <code>level<\/code> prop&#8217;una g\u00f6re dinamik olarak <code>h1<\/code>&#8216;den <code>h6<\/code>&#8216;ya kadar ba\u015fl\u0131k etiketleri olu\u015fturur, CSS s\u0131n\u0131flar\u0131, stiller ve bir click olay dinleyicisi ekler.<\/p>\n<h2>Senaryolar ve Kullan\u0131m Durumlar\u0131<\/h2>\n<p>Fonksiyonel bile\u015fenler, \u00f6zellikle a\u015fa\u011f\u0131daki senaryolarda parlarlar:<\/p>\n<p>*   <strong>Basit G\u00f6rsel Bile\u015fenler:<\/strong> Yaln\u0131zca props al\u0131p belirli bir HTML yap\u0131s\u0131n\u0131 render eden bile\u015fenler (\u00f6rne\u011fin, bir ikon, bir d\u00fc\u011fme, bir kart ba\u015fl\u0131\u011f\u0131, bir liste \u00f6\u011fesi). Bu t\u00fcr bile\u015fenlerin kendi i\u00e7 durumlar\u0131, ya\u015fam d\u00f6ng\u00fcleri veya karma\u015f\u0131k etkile\u015fimleri yoktur.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Basit bir ikon bile\u015feni\n    export default {\n      functional: true,\n      props: ['name'],\n      render(h, { props }) {\n        return h('i', { class: ['icon', <code>icon-${props.name}<\/code>] });\n      }\n    };<\/code><\/pre>\n<p>*   <strong>Y\u00fcksek Dereceli Bile\u015fenler (HOCs) veya Wrapper Bile\u015fenleri:<\/strong> Ba\u015fka bile\u015fenleri sarmalayan, onlara ek \u00f6zellikler (\u00f6rne\u011fin, stil, layout) sa\u011flayan ancak kendileri durum y\u00f6netimi yapmayan bile\u015fenler. Vue 3&#8217;teki Composition API ile HOC deseninin kullan\u0131m\u0131 azalsa da, Vue 2 projelerinde veya belirli sarmalama ihtiya\u00e7lar\u0131nda hala ge\u00e7erli olabilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Bir Card bile\u015feni (wrapper)\n    export default {\n      functional: true,\n      render(h, { data, children }) {\n        return h(\n          'div',\n          {\n            ...data,\n            class: ['card', data.class]\n          },\n          children\n        );\n      }\n    };<\/code><\/pre>\n<p>*   <strong>Dinamik Etiketler veya Bile\u015fenler:<\/strong> <code>is<\/code> attribute&#8217;\u00fc ile dinamik olarak bir element veya bile\u015fen render etme ihtiyac\u0131 oldu\u011funda, render fonksiyonu ve fonksiyonel bile\u015fenler esneklik sunabilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Dinamik bir element render eden bile\u015fen\n    export default {\n      functional: true,\n      props: ['tag'], \/\/ \u00f6rn: 'p', 'span', 'div'\n      render(h, { props, children }) {\n        return h(props.tag || 'div', children);\n      }\n    };<\/code><\/pre>\n<p>*   <strong>Performans Kritik Listeler:<\/strong> \u00c7ok say\u0131da \u00f6\u011fe i\u00e7eren listeleri render ederken (\u00f6rne\u011fin, sanal listeleme k\u00fct\u00fcphaneleri i\u00e7inde). Her bir liste \u00f6\u011fesinin bir Vue \u00f6rne\u011fi olu\u015fturmas\u0131 yerine fonksiyonel bile\u015fen olarak render edilmesi, \u00f6nemli performans iyile\u015ftirmeleri sa\u011flayabilir.<\/p>\n<h2>Vue 2 ve Vue 3&#8217;teki Farkl\u0131l\u0131klar<\/h2>\n<p>Vue 3, fonksiyonel bile\u015fen kavram\u0131na yakla\u015f\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftirmi\u015ftir. <code>functional: true<\/code> se\u00e7ene\u011fi art\u0131k gerekli de\u011fildir ve hatta kald\u0131r\u0131lm\u0131\u015ft\u0131r. Vue 3&#8217;te, bir bile\u015fen, e\u011fer kendisi bir <code>setup<\/code> fonksiyonu veya durum (\u00f6rne\u011fin <code>ref<\/code>, <code>reactive<\/code>) i\u00e7ermeyen bir fonksiyon olarak tan\u0131mlanm\u0131\u015fsa, \u00f6rt\u00fck olarak fonksiyonel kabul edilir.<\/p>\n<p><strong>Vue 3&#8217;te Fonksiyonel Bile\u015fen Olu\u015fturma:<\/strong><\/p>\n<p>Vue 3&#8217;te bir fonksiyonel bile\u015fen, basit\u00e7e bir <code>render<\/code> fonksiyonu d\u00f6nd\u00fcren veya do\u011frudan JSX\/TSX kullanan bir fonksiyondur. <code>h<\/code> fonksiyonu art\u0131k <code>vue<\/code> paketinden do\u011frudan import edilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Vue 3 Fonksiyonel Bile\u015fen \u00d6rne\u011fi\nimport { h } from 'vue';\n\nconst FunctionalButton = (props, context) =&gt; {\n  \/\/ props: bile\u015fene iletilen props'lar\n  \/\/ context: { attrs, slots, emit }\n  const { label, variant } = props;\n  const { attrs, slots, emit } = context;\n\n  const handleClick = () =&gt; {\n    emit('click', 'Butona t\u0131kland\u0131!'); \/\/ Olay emit etme\n  };\n\n  return h(\n    'button',\n    {\n      ...attrs, \/\/ attrs, class, style, id gibi nitelikler burada\n      class: ['functional-button', <code>functional-button--${variant}<\/code>],\n      onClick: handleClick \/\/ Olay dinleyicisi do\u011frudan burada tan\u0131mlan\u0131r\n    },\n    [\n      label,\n      slots.default ? slots.default() : null \/\/ Slot i\u00e7eri\u011fini render et\n    ]\n  );\n};\n\nFunctionalButton.props = {\n  label: {\n    type: String,\n    required: true\n  },\n  variant: {\n    type: String,\n    default: 'primary'\n  }\n};\n\nFunctionalButton.emits = ['click']; \/\/ Emit edilen olaylar\u0131 tan\u0131mlamak iyi bir pratiktir\n\nexport default FunctionalButton;<\/code><\/pre>\n<p>Vue 3&#8217;teki <code>context<\/code> nesnesi, Vue 2&#8217;den biraz farkl\u0131d\u0131r ve \u015funlar\u0131 i\u00e7erir:<\/p>\n<p><em>   <strong><code>attrs<\/code><\/strong>: Bile\u015fene iletilen, ancak <code>props<\/code> olarak tan\u0131mlanmam\u0131\u015f t\u00fcm nitelikler (\u00f6rne\u011fin, <code>id<\/code>, <code>data-<\/em><\/code>, <code>class<\/code>, <code>style<\/code>). Vue 2&#8217;deki <code>context.data.attrs<\/code>, <code>context.data.class<\/code>, <code>context.data.style<\/code> gibi \u00f6zelliklerin birle\u015fimi gibidir.<br \/>\n*   <strong><code>slots<\/code><\/strong>: Slot i\u00e7eri\u011fine eri\u015fmek i\u00e7in bir nesnedir. <code>slots.default()<\/code> varsay\u0131lan slotu, <code>slots.header()<\/code> adland\u0131r\u0131lm\u0131\u015f &#8216;header&#8217; slotunu d\u00f6nd\u00fcr\u00fcr.<br \/>\n*   <strong><code>emit<\/code><\/strong>: \u00dcst bile\u015fene olay g\u00f6ndermek i\u00e7in bir fonksiyondur.<\/p>\n<p>Vue 3&#8217;te fonksiyonel bile\u015fenler, daha \u00f6nce <code>functional: true<\/code> ile belirtilen \u00f6zel bir mod olmaktan \u00e7\u0131k\u0131p, Vue&#8217;nin genel bile\u015fen tan\u0131m\u0131n\u0131n do\u011fal bir par\u00e7as\u0131 haline gelmi\u015ftir. E\u011fer bir bile\u015fen bir <code>setup<\/code> fonksiyonuna sahip de\u011filse ve reaktif durum kullanm\u0131yorsa, otomatik olarak optimize edilmi\u015f bir \u015fekilde i\u015flenir. Bu, geli\u015ftiricilerin functional bile\u015fenleri \u00f6zel bir durum olarak d\u00fc\u015f\u00fcnmek yerine, sadece basit, durumsuz bile\u015fenler yazmaya odaklanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h2>Ne Zaman Fonksiyonel Bile\u015fen KULLANMAMALISINIZ?<\/h2>\n<p>Fonksiyonel bile\u015fenler g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, her zaman do\u011fru se\u00e7im de\u011fildirler. A\u015fa\u011f\u0131daki durumlarda standart (stateful) bile\u015fenleri kullanmay\u0131 tercih etmelisiniz:<\/p>\n<p>*   <strong>Durum Y\u00f6netimi Gerektiren Bile\u015fenler:<\/strong> Bile\u015fenin kendi i\u00e7 durumunu (<code>data<\/code> veya Vue 3&#8217;teki <code>ref<\/code>, <code>reactive<\/code>) y\u00f6netmesi gerekiyorsa, fonksiyonel bile\u015fenler uygun de\u011fildir.<br \/>\n*   <strong>Ya\u015fam D\u00f6ng\u00fcs\u00fc Kancalar\u0131na \u0130htiya\u00e7 Duyan Bile\u015fenler:<\/strong> Bile\u015fenin <code>mounted<\/code>, <code>created<\/code>, <code>updated<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131na tepki vermesi gerekiyorsa, fonksiyonel bile\u015fenler kullan\u0131lamaz \u00e7\u00fcnk\u00fc bir Vue \u00f6rne\u011fi olu\u015fturmazlar.<br \/>\n*   <strong>Ref&#8217;lere Do\u011frudan Eri\u015fim Gerektiren Bile\u015fenler:<\/strong> Bir bile\u015fenin kendisine veya i\u00e7indeki belirli bir elemente <code>ref<\/code> arac\u0131l\u0131\u011f\u0131yla do\u011frudan eri\u015fmesi gerekiyorsa, bu fonksiyonel bile\u015fenlerle m\u00fcmk\u00fcn de\u011fildir (ancak fonksiyonel bile\u015fen i\u00e7inde bir HTML elementine <code>ref<\/code> ba\u011flanabilir).<br \/>\n*   <strong>Computed Property&#8217;ler veya Watcher&#8217;lar Gerektiren Bile\u015fenler:<\/strong> Karma\u015f\u0131k hesaplamalar veya reaktif verilerdeki de\u011fi\u015fiklikleri izleme ihtiyac\u0131 varsa, standart bile\u015fenler daha uygundur.<br \/>\n*   <strong>Karma\u015f\u0131k Olay Y\u00f6netimi veya \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama:<\/strong> <code>v-model<\/code> gibi iki y\u00f6nl\u00fc veri ba\u011flama veya karma\u015f\u0131k olay emit etme\/dinleme mant\u0131\u011f\u0131 gerektiren bile\u015fenler i\u00e7in standart bile\u015fenler daha uygun bir yap\u0131 sunar.<br \/>\n*   <strong>Slot \u0130\u00e7eri\u011fini Dinamik Olarak De\u011fi\u015ftirme:<\/strong> Fonksiyonel bile\u015fenler <code>slots<\/code>&#8216;a eri\u015febilirken, <code>scopedSlots<\/code> ile karma\u015f\u0131k dinamik render senaryolar\u0131 Vue 2&#8217;de biraz daha karma\u015f\u0131k olabilir. Vue 3&#8217;te bu durum daha basittir.<\/p>\n<h2>En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h2>\n<p>*   <strong>Basit Tutun:<\/strong> Fonksiyonel bile\u015fenlerin en b\u00fcy\u00fck g\u00fcc\u00fc basitlikleridir. Onlar\u0131 sadece props al\u0131p VNodes d\u00f6nd\u00fcren &#8220;saf&#8221; fonksiyonlar olarak d\u00fc\u015f\u00fcn\u00fcn.<br \/>\n*   <strong><code>props<\/code> Do\u011frulamas\u0131n\u0131 Kullan\u0131n:<\/strong> Fonksiyonel bile\u015fenler hala <code>props<\/code> do\u011frulamas\u0131n\u0131 destekler. Bu, bile\u015feninize iletilen verilerin beklenen formatta olmas\u0131n\u0131 sa\u011flamak i\u00e7in \u00f6nemlidir ve geli\u015ftirme s\u0131ras\u0131nda hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olur.<br \/>\n*   <strong>Okunabilirlik \u0130\u00e7in JSX\/TSX Kullanmay\u0131 D\u00fc\u015f\u00fcn\u00fcn (Vue 3):<\/strong> E\u011fer projeniz JSX veya TSX&#8217;i destekliyorsa, Vue 3&#8217;teki fonksiyonel bile\u015fenler i\u00e7in <code>h<\/code> fonksiyonunu do\u011frudan kullanmak yerine JSX\/TSX s\u00f6zdizimini tercih etmek, render fonksiyonlar\u0131n\u0131z\u0131n daha okunabilir olmas\u0131n\u0131 sa\u011flayabilir.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Vue 3 JSX Fonksiyonel Bile\u015fen \u00d6rne\u011fi\n    const FunctionalGreeting = (props, { slots }) =&gt; {\n      return (\n        &lt;div class=&quot;greeting&quot;&gt;\n          \n          {slots.default &amp;&amp; slots.default()}\n        &lt;\/div&gt;\n      );\n    };\n\n    FunctionalGreeting.props = ['name'];\n    export default FunctionalGreeting;<\/code><\/pre>\n<p>*   <strong>Performans Kazan\u00e7lar\u0131n\u0131 Abartmay\u0131n:<\/strong> Fonksiyonel bile\u015fenler performans iyile\u015ftirmeleri sunar, ancak bu iyile\u015ftirmeler genellikle k\u00fc\u00e7\u00fck bile\u015fenlerin binlercesi kullan\u0131ld\u0131\u011f\u0131nda anlaml\u0131 hale gelir. Bir bile\u015fenin performans sorunlar\u0131 ya\u015famas\u0131 beklenmiyorsa, sadece &#8220;performans i\u00e7in&#8221; fonksiyonel bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrmek gereksiz karma\u015f\u0131kl\u0131k yaratabilir. \u00d6nceli\u011finiz her zaman okunabilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik olmal\u0131d\u0131r.<br \/>\n*   <strong>Dok\u00fcmantasyon:<\/strong> Fonksiyonel bile\u015fenlerinizi, \u00f6zellikle bekledikleri props&#8217;lar\u0131 ve emit ettikleri olaylar\u0131 a\u00e7\u0131k\u00e7a belgeleyin.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Vue.js&#8217;teki fonksiyonel bile\u015fenler, performans odakl\u0131 ve durumsuz UI elemanlar\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve verimli bir mekanizma sunar. Bir Vue \u00f6rne\u011fi olu\u015fturma maliyetini ortadan kald\u0131rarak, \u00f6zellikle b\u00fcy\u00fck listelerde veya basit g\u00f6rsel sunum bile\u015fenlerinde daha h\u0131zl\u0131 render s\u00fcreleri ve daha d\u00fc\u015f\u00fck bellek t\u00fcketimi sa\u011flarlar. Vue 2&#8217;de <code>functional: true<\/code> se\u00e7ene\u011fi ve <code>context<\/code> nesnesi ile tan\u0131mlan\u0131rken, Vue 3&#8217;te bu kavram daha da basitle\u015ftirilmi\u015f, durumsuz fonksiyonlar do\u011fal olarak fonksiyonel bile\u015fenler olarak kabul edilmi\u015ftir.<\/p>\n<p>Geli\u015ftiricilerin, bir bile\u015fenin ne zaman bir duruma, ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131na veya reaktiviteye ihtiya\u00e7 duydu\u011funu dikkatlice de\u011ferlendirmesi \u00f6nemlidir. E\u011fer bir bile\u015fen yaln\u0131zca props al\u0131p \u00e7\u0131kt\u0131 render ediyorsa, fonksiyonel bir bile\u015fen olarak tasarlamak, hem kodun basitli\u011fini art\u0131r\u0131r hem de uygulaman\u0131n genel performans\u0131na katk\u0131da bulunur. Ancak, daha karma\u015f\u0131k etkile\u015fimler veya durum y\u00f6netimi gerektiren senaryolarda standart bile\u015fenler tercih edilmelidir. Do\u011fru kullan\u0131m senaryolar\u0131n\u0131 anlamak, Vue.js uygulamalar\u0131n\u0131z\u0131n hem performansl\u0131 hem de s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n<div class=\"github-example-link\"><strong>\u00d6rnek kod:<\/strong> <a href=\"https:\/\/github.com\/fatihsoysalcom\/vue-2-functional-component-demo\" target=\"_blank\" rel=\"noopener noreferrer\">github.com\/fatihsoysalcom\/vue-2-functional-component-demo<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"\/\/ Vue 2 Fonksiyonel Bile\u015fen \u00d6rne\u011fi export default { functional: true, \/\/ Bu, bile\u015fenin fonksiyonel oldu\u011funu belirtir props: { message: { type: String, required: true }, variant: { type: String, default: &#8216;info&#8217; } }, \/\/ render fonksiyonu, h (createElement) ve context arg\u00fcmanlar\u0131n\u0131 al\u0131r render(h, context) { \/\/ context.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-43331","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue.js&#039;te Fonksiyonel Bile\u015fenleri Render Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js&#039;te Fonksiyonel Bile\u015fenleri Render Etme\" \/>\n<meta property=\"og:description\" content=\"\/\/ Vue 2 Fonksiyonel Bile\u015fen \u00d6rne\u011fi export default { functional: true, \/\/ Bu, bile\u015fenin fonksiyonel oldu\u011funu belirtir props: { message: { type: String, required: true }, variant: { type: String, default: &#039;info&#039; } }, \/\/ render fonksiyonu, h (createElement) ve context arg\u00fcmanlar\u0131n\u0131 al\u0131r render(h, context) { \/\/ context.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-14T14:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T14:02:04+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme\",\"datePublished\":\"2026-07-14T14:01:34+00:00\",\"dateModified\":\"2026-07-14T14:02:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\"},\"wordCount\":2471,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\",\"name\":\"Vue.js'te Fonksiyonel Bile\u015fenleri Render Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-07-14T14:01:34+00:00\",\"dateModified\":\"2026-07-14T14:02:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue.js'te Fonksiyonel Bile\u015fenleri Render Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js'te Fonksiyonel Bile\u015fenleri Render Etme","og_description":"\/\/ Vue 2 Fonksiyonel Bile\u015fen \u00d6rne\u011fi export default { functional: true, \/\/ Bu, bile\u015fenin fonksiyonel oldu\u011funu belirtir props: { message: { type: String, required: true }, variant: { type: String, default: 'info' } }, \/\/ render fonksiyonu, h (createElement) ve context arg\u00fcmanlar\u0131n\u0131 al\u0131r render(h, context) { \/\/ context.","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-14T14:01:34+00:00","article_modified_time":"2026-07-14T14:02:04+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme","datePublished":"2026-07-14T14:01:34+00:00","dateModified":"2026-07-14T14:02:04+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/"},"wordCount":2471,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/","name":"Vue.js'te Fonksiyonel Bile\u015fenleri Render Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-07-14T14:01:34+00:00","dateModified":"2026-07-14T14:02:04+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-fonksiyonel-bilesenleri-render-etme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js&#8217;te Fonksiyonel Bile\u015fenleri Render Etme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43331"}],"version-history":[{"count":2,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43331\/revisions"}],"predecessor-version":[{"id":43333,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43331\/revisions\/43333"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}