{"id":37563,"date":"2026-01-09T11:40:47","date_gmt":"2026-01-09T08:40:47","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37563"},"modified":"2026-01-09T11:40:47","modified_gmt":"2026-01-09T08:40:47","slug":"vue-js-bilesen-orneklemesini-anlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-bilesen-orneklemesini-anlamak\/","title":{"rendered":"Vue.js Bile\u015fen \u00d6rneklemesini Anlamak"},"content":{"rendered":"

<\/p>\n

Vue.js Bile\u015fen \u00d6rneklemesini Anlamak<\/h2>\n

Giri\u015f<\/h2>\n
Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan bile\u015fen tabanl\u0131 mimari, uygulamalar\u0131n daha mod\u00fcler, yeniden kullan\u0131labilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r. Vue.js, bu mimariyi benimseyen pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir ve bile\u015fenler, Vue uygulamalar\u0131n\u0131n yap\u0131 ta\u015flar\u0131d\u0131r. Bir Vue uygulamas\u0131nda, tan\u0131mlad\u0131\u011f\u0131m\u0131z her bile\u015fen asl\u0131nda bir “\u015fablon” veya “plan” gibidir. Bu planlardan yola \u00e7\u0131karak olu\u015fturulan ve bellekte kendi ba\u011f\u0131ms\u0131z durumuna, ya\u015fam d\u00f6ng\u00fcs\u00fcne ve reaktif verisine sahip olan her bir yap\u0131ya ise “bile\u015fen \u00f6rne\u011fi” (component instance) denir. Bu makalede, Vue.js’teki bile\u015fen \u00f6rneklemesi kavram\u0131n\u0131 derinlemesine inceleyecek, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, neden \u00f6nemli oldu\u011funu ve uygulamalar\u0131m\u0131z\u0131 geli\u015ftirirken nelere dikkat etmemiz gerekti\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Bile\u015fen \u00f6rneklemesini do\u011fru anlamak, Vue uygulamalar\u0131n\u0131 daha verimli, hatas\u0131z ve performansl\u0131 bir \u015fekilde geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n

Bile\u015fen \u00d6rneklemesi Nedir?<\/h2>\n
Vue.js’te bir bile\u015fen tan\u0131mlad\u0131\u011f\u0131m\u0131zda (\u00f6rne\u011fin bir .vue<\/code> dosyas\u0131 i\u00e7inde veya Vue.component()<\/code> ile), asl\u0131nda bir “bile\u015fen tan\u0131m\u0131” veya “bile\u015fen se\u00e7ene\u011fi nesnesi” olu\u015fturmu\u015f oluruz. Bu tan\u0131m, bile\u015fenin \u015fablonunu, verisini, y\u00f6ntemlerini, hesaplanm\u0131\u015f \u00f6zelliklerini ve ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 i\u00e7erir. Ancak bu tan\u0131m, tek ba\u015f\u0131na taray\u0131c\u0131da g\u00f6r\u00fcnen bir \u015fey de\u011fildir; sadece bir plan veya \u015fema gibidir.<\/p>\n
Bir bile\u015fen tan\u0131m\u0131n\u0131 bir uygulamada kulland\u0131\u011f\u0131m\u0131zda (\u00f6rne\u011fin, bir \u00fcst bile\u015fenin \u015fablonunda <\/code> \u015feklinde), Vue bu tan\u0131mdan yola \u00e7\u0131karak bellekte yeni bir “bile\u015fen \u00f6rne\u011fi” olu\u015fturur. T\u0131pk\u0131 bir s\u0131n\u0131f\u0131n bir\u00e7ok farkl\u0131 nesne \u00f6rne\u011fini \u00fcretebilmesi gibi, bir bile\u015fen tan\u0131m\u0131 da uygulamam\u0131zda bir\u00e7ok farkl\u0131 ve ba\u011f\u0131ms\u0131z bile\u015fen \u00f6rne\u011fi olu\u015fturabilir. Her bir bile\u015fen \u00f6rne\u011fi:<\/p>\n
* Kendi Ba\u011f\u0131ms\u0131z Durumuna Sahiptir:<\/strong> E\u011fer bile\u015fenin bir data<\/code> \u00f6zelli\u011fi varsa, her \u00f6rnek bu data<\/code>‘n\u0131n kendi kopyas\u0131na sahip olur. Bir \u00f6rne\u011fin verisini de\u011fi\u015ftirmek, di\u011fer \u00f6rneklerin verisini etkilemez. \n* Kendi Ya\u015fam D\u00f6ng\u00fcs\u00fcne Sahiptir:<\/strong> Her \u00f6rne\u011fin kendi olu\u015fturulma, ba\u011flanma, g\u00fcncellenme ve ayr\u0131lma s\u00fcre\u00e7leri vard\u0131r. Bu s\u00fcre\u00e7ler boyunca tetiklenen ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131, her \u00f6rnek i\u00e7in ayr\u0131 ayr\u0131 \u00e7al\u0131\u015f\u0131r. \n* Kendi Reaktif Mekanizmas\u0131na Sahiptir:<\/strong> Her \u00f6rnek, kendi verisindeki de\u011fi\u015fiklikleri izler ve yaln\u0131zca kendi DOM’unu g\u00fcnceller.<\/p>\n
`Bu ayr\u0131m, bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini ve mod\u00fclerli\u011fini sa\u011flayan temel mekanizmad\u0131r. Ayn\u0131 bile\u015feni bir uygulamada birden \u00e7ok kez kullanabiliriz ve her biri kendi ba\u011flam\u0131nda ba\u011f\u0131ms\u0131z bir \u015fekilde \u00e7al\u0131\u015f\u0131r.<\/p>\n`

Bile\u015fen \u00d6rnekleri Nas\u0131l Olu\u015fturulur?<\/h3>\nVue.js’te bile\u015fen \u00f6rnekleri \u00e7e\u015fitli yollarla olu\u015fturulabilir:<\/p>\n
*   \u015eablonlarda Kullan\u0131m:<\/strong> En yayg\u0131n y\u00f6ntemdir. Bir \u00fcst bile\u015fenin \u015fablonunda alt bile\u015feni etiket olarak kullanmak (<\/code>) Vue’ye yeni bir \u00f6rnek olu\u015fturmas\u0131 talimat\u0131n\u0131 verir.
\n*   K\u00f6k \u00d6rnek Olu\u015fturma:<\/strong> new Vue()<\/code> (Vue 2) veya createApp()<\/code> (Vue 3) ile uygulaman\u0131n kendisi bir k\u00f6k bile\u015fen \u00f6rne\u011fi olarak ba\u015flar. T\u00fcm di\u011fer bile\u015fenler bu k\u00f6k \u00f6rne\u011fin \u00e7ocuklar\u0131 olarak \u00f6rneklendirilir.
\n*   v-for<\/code> ile \u00c7oklu \u00d6rnekler:<\/strong> Bir liste \u00fczerinde d\u00f6ng\u00fc yaparak ayn\u0131 bile\u015fenden birden \u00e7ok \u00f6rnek olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Her liste \u00f6\u011fesi i\u00e7in yeni ve ba\u011f\u0131ms\u0131z bir bile\u015fen \u00f6rne\u011fi olu\u015fturulur.
\n*   Dinamik Bile\u015fenler (<\/code>):<\/strong> \u00c7al\u0131\u015fma zaman\u0131nda hangi bile\u015fenin \u00f6rneklendirilece\u011fine karar vermek i\u00e7in kullan\u0131l\u0131r. :is<\/code> \u00f6zelli\u011finin de\u011feri de\u011fi\u015ftik\u00e7e, mevcut \u00f6rnek yok edilir ve yeni bir bile\u015fen t\u00fcr\u00fcnden yeni bir \u00f6rnek olu\u015fturulur.<\/p>\n
\u00d6rnek Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/h2>\nHer bir Vue bile\u015fen \u00f6rne\u011fi, olu\u015fturulmas\u0131ndan yok edilmesine kadar belirli bir ya\u015fam d\u00f6ng\u00fcs\u00fcnden ge\u00e7er. Bu ya\u015fam d\u00f6ng\u00fcs\u00fc, farkl\u0131 a\u015famalarda tetiklenen kancalar (hooks) arac\u0131l\u0131\u011f\u0131yla y\u00f6netilir. Her bile\u015fen \u00f6rne\u011fi, kendi ba\u011f\u0131ms\u0131z ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131na sahiptir.<\/p>\n
*   Olu\u015fturma (Creation) A\u015famas\u0131nda:<\/strong>
\n    *   beforeCreate()<\/code>: \u00d6rnek hen\u00fcz ba\u015flat\u0131lmam\u0131\u015ft\u0131r, data<\/code> ve events<\/code> ayarlanmam\u0131\u015ft\u0131r.
\n    *   created()<\/code>: \u00d6rnek olu\u015fturulmu\u015ftur. data<\/code> ve events<\/code> ayarlanm\u0131\u015ft\u0131r, ancak \u015fablon DOM’a ba\u011flanmam\u0131\u015ft\u0131r. Bu a\u015famada API \u00e7a\u011fr\u0131lar\u0131 yapmak yayg\u0131nd\u0131r.
\n*   Ba\u011flama (Mounting) A\u015famas\u0131nda:<\/strong>
\n    *   beforeMount()<\/code>: \u015eablon DOM’a ba\u011flanmadan hemen \u00f6nce.
\n    *   mounted()<\/code>: Bile\u015fen DOM’a ba\u011flanm\u0131\u015ft\u0131r ve eri\u015filebilir durumdad\u0131r. DOM manip\u00fclasyonlar\u0131 veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphane entegrasyonlar\u0131 burada yap\u0131labilir.
\n*   G\u00fcncelleme (Updating) A\u015famas\u0131nda:<\/strong>
\n    *   beforeUpdate()<\/code>: Reaktif veri de\u011fi\u015fti\u011finde ve DOM yeniden olu\u015fturulmadan \u00f6nce tetiklenir.
\n    *   updated()<\/code>: Reaktif veri de\u011fi\u015fti\u011finde ve DOM yeniden olu\u015fturulduktan sonra tetiklenir.
\n*   Ayr\u0131lma (Unmounting) A\u015famas\u0131nda:<\/strong>
\n    *   beforeUnmount()<\/code> (Vue 3) \/ beforeDestroy()<\/code> (Vue 2): Bile\u015fen \u00f6rne\u011fi yok edilmeden hemen \u00f6nce. Temizleme i\u015flemleri (olay dinleyicilerini kald\u0131rma, zamanlay\u0131c\u0131lar\u0131 temizleme) burada yap\u0131lmal\u0131d\u0131r.
\n    *   unmounted()<\/code> (Vue 3) \/ destroyed()<\/code> (Vue 2): Bile\u015fen \u00f6rne\u011fi tamamen yok edilmi\u015ftir.<\/p>\n
Bir \u00fcst bile\u015fen \u00f6rne\u011fi yok edildi\u011finde, onun t\u00fcm alt bile\u015fen \u00f6rnekleri de s\u0131rayla yok edilir ve kendi beforeUnmount<\/code> ve unmounted<\/code> kancalar\u0131 tetiklenir. Bu hiyerar\u015fik ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi, karma\u015f\u0131k uygulamalarda kaynaklar\u0131n do\u011fru bir \u015fekilde serbest b\u0131rak\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n
Veri Reaktivitesi ve \u00d6rnekler<\/h2>\nVue.js’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri reaktif veri sistemidir. Bu sistem, bir bile\u015fen \u00f6rne\u011finin data<\/code> \u00f6zelli\u011finde yap\u0131lan de\u011fi\u015fiklikleri otomatik olarak izler ve bu de\u011fi\u015fikliklere ba\u011fl\u0131 olarak DOM’u g\u00fcnceller. Bile\u015fen \u00f6rneklemesi ba\u011flam\u0131nda, bu reaktivite her \u00f6rnek i\u00e7in ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015f\u0131r.<\/p>\n
data()<\/code> Fonksiyonu<\/h3>\nBir Vue bile\u015feninde data<\/code> \u00f6zelli\u011fini tan\u0131mlarken, bunun bir fonksiyon olmas\u0131n\u0131n nedeni tam da budur. E\u011fer data<\/code> bir nesne olsayd\u0131, ayn\u0131 bile\u015fenden olu\u015fturulan t\u00fcm \u00f6rnekler ayn\u0131 veri nesnesini payla\u015f\u0131rd\u0131. Bu da bir \u00f6rne\u011fin verisini de\u011fi\u015ftirmenin di\u011fer t\u00fcm \u00f6rneklerin verisini de de\u011fi\u015ftirmesi anlam\u0131na gelirdi ki bu istenmeyen bir durumdur. data<\/code>‘y\u0131 bir fonksiyon olarak tan\u0131mlad\u0131\u011f\u0131m\u0131zda:<\/p>\n
export default {\n  data() {\n    return {\n      count: 0,\n      message: 'Merhaba Vue!'\n    };\n  }\n};<\/code><\/pre>\nHer bile\u015fen \u00f6rne\u011fi olu\u015fturuldu\u011funda, bu data()<\/code> fonksiyonu \u00e7a\u011fr\u0131l\u0131r ve fonksiyon yeni bir veri nesnesi d\u00f6nd\u00fcr\u00fcr. B\u00f6ylece her \u00f6rnek kendi count<\/code> ve message<\/code> \u00f6zelliklerine sahip olur ve bunlar di\u011fer \u00f6rneklerden ba\u011f\u0131ms\u0131zd\u0131r.<\/p>\n
Props ve \u00d6rnekler<\/h3>\nprops<\/code>, \u00fcst bile\u015fenlerden alt bile\u015fenlere veri aktarman\u0131n bir yoludur. Her bile\u015fen \u00f6rne\u011fi, kendisine aktar\u0131lan props<\/code> de\u011ferlerinin kendi kopyas\u0131na sahiptir. props<\/code> tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131n\u0131 temsil eder, yani bir alt bile\u015fen do\u011frudan kendi props<\/code> de\u011ferlerini de\u011fi\u015ftirmemelidir. \u00dcst bile\u015fen prop<\/code> de\u011ferini de\u011fi\u015ftirdi\u011finde, alt bile\u015fenin ilgili \u00f6rne\u011fi otomatik olarak g\u00fcncellenir. Bu, her bir \u00f6rne\u011fin kendi prop<\/code> de\u011ferlerine sahip olmas\u0131n\u0131 ve bu de\u011ferlerin \u00fcst bile\u015fen taraf\u0131ndan y\u00f6netilmesini sa\u011flar.<\/p>\n
Computed \u00d6zellikler ve Watch Fonksiyonlar\u0131<\/h3>\ncomputed<\/code> \u00f6zellikler ve watch<\/code> fonksiyonlar\u0131 da her bile\u015fen \u00f6rne\u011fi i\u00e7in ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015f\u0131r. Bir \u00f6rne\u011fin computed<\/code> \u00f6zelli\u011fi, yaln\u0131zca o \u00f6rne\u011fin reaktif verisine veya props<\/code>‘una ba\u011fl\u0131 olarak yeniden hesaplan\u0131r. Benzer \u015fekilde, bir watch<\/code> fonksiyonu da yaln\u0131zca o \u00f6rne\u011fin izledi\u011fi veriler de\u011fi\u015fti\u011finde tetiklenir. Bu, her \u00f6rne\u011fin kendi ba\u011flam\u0131nda veriye dayal\u0131 mant\u0131\u011f\u0131n\u0131 y\u00fcr\u00fctebilmesini sa\u011flar.<\/p>\n
v-for<\/code> ile \u00c7oklu \u00d6rnekler<\/h2>\nv-for<\/code> direktifi, bir dizi veya nesne \u00fczerindeki \u00f6\u011feleri yineleyerek birden \u00e7ok DOM \u00f6\u011fesi veya bile\u015fen \u00f6rne\u011fi olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bir bile\u015fenle birlikte v-for<\/code> kulland\u0131\u011f\u0131m\u0131zda, dizideki her bir \u00f6\u011fe i\u00e7in bile\u015fenin yeni ve ba\u011f\u0131ms\u0131z bir \u00f6rne\u011fi olu\u015fturulur.<\/p>\n
\u00d6rne\u011fin, bir TodoList<\/code> bile\u015fenimiz oldu\u011funu ve her bir TodoItem<\/code> bile\u015feninin bir g\u00f6revi temsil etti\u011fini varsayal\u0131m:<\/p>\n