{"id":16761,"date":"2025-03-31T10:00:16","date_gmt":"2025-03-31T07:00:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-3te-buyuk-listeleri-verimli-bir-sekilde-yonetme\/"},"modified":"2025-03-31T10:00:16","modified_gmt":"2025-03-31T07:00:16","slug":"vue-3te-buyuk-listeleri-verimli-bir-sekilde-yonetme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-3te-buyuk-listeleri-verimli-bir-sekilde-yonetme\/","title":{"rendered":"Vue 3’te B\u00fcy\u00fck Listeleri Verimli Bir \u015eekilde Y\u00f6netme"},"content":{"rendered":"

Vue 3’te B\u00fcy\u00fck Listeleri Verimli Bir \u015eekilde Y\u00f6netme<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn Vue 3’te b\u00fcy\u00fck listeleri nas\u0131l verimli bir \u015fekilde y\u00f6netebilece\u011finizi ele alaca\u011f\u0131z. B\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken performans d\u00fc\u015f\u00fc\u015fleri ya\u015famamak i\u00e7in baz\u0131 stratejiler uygulamal\u0131y\u0131z. Aksi takdirde, uygulaman\u0131z yava\u015flayabilir ve kullan\u0131c\u0131 deneyimi olumsuz etkilenebilir. Bu makalede, performans\u0131 optimize etmek i\u00e7in kullanabilece\u011finiz pratik y\u00f6ntemleri ve Vue 3’\u00fcn sundu\u011fu \u00f6zelliklerden bahsedece\u011fiz.<\/p>\n

Veri Optimizasyonu: Anahtar Performans Fakt\u00f6r\u00fc<\/h2>\n

\u00d6ncelikle, Vue uygulamalar\u0131n\u0131zda verileri nas\u0131l optimize edebilece\u011finizi inceleyelim. B\u00fcy\u00fck listelerle \u00e7al\u0131\u015f\u0131rken en b\u00fcy\u00fck sorun, Vue’nun her bir \u00f6\u011feyi yeniden render etmesidir. Bu i\u015flem, liste \u00f6\u011felerinin say\u0131s\u0131 artt\u0131k\u00e7a \u00f6nemli \u00f6l\u00e7\u00fcde yava\u015flayabilir. Bu nedenle, verilerimizi olabildi\u011fince optimize etmek \u00e7ok \u00f6nemlidir. \u00d6rne\u011fin, gereksiz verileri kald\u0131rarak veya veri yap\u0131lar\u0131n\u0131 iyile\u015ftirerek performans\u0131 art\u0131rabilirsiniz. Ayr\u0131ca, verilerinizi sunucu taraf\u0131nda \u00f6nceden i\u015fleyerek istemci taraf\u0131ndaki y\u00fck\u00fc azaltabilirsiniz. <\/p>\n

v-for Direktifi ve Performans \u0130pu\u00e7lar\u0131<\/h2>\n

Vue’da listeleri render etmek i\u00e7in kullan\u0131lan v-for direktifi, b\u00fcy\u00fck listelerde performans sorunlar\u0131na yol a\u00e7abilir. Bununla ba\u015fa \u00e7\u0131kmak i\u00e7in, :key \u00f6zelli\u011fini kullanarak her bir \u00f6\u011feye benzersiz bir anahtar ataman\u0131z \u00f6nerilir. Bu sayede, Vue sadece de\u011fi\u015ftirilen \u00f6\u011feleri yeniden render eder. :key<\/code>‘in kullan\u0131m\u0131, Vue’nun sanal DOM’u (Virtual DOM) daha verimli kullanmas\u0131n\u0131 sa\u011flar ve g\u00fcncellemeleri daha h\u0131zl\u0131 hale getirir. \u00d6rne\u011fin, bir dizi i\u00e7in \u015f\u00f6yle bir kullan\u0131m yapabilirsiniz:<\/p>\n

\n<ul>\n  <li v-for=\"item in items\" :key=\"item.id\">{{ item.name }}<\/li>\n<\/ul>\n<\/code><\/pre>\n
Ek olarak, v-if ve v-else direktiflerini kullanarak, gereksiz \u00f6\u011felerin render edilmesini \u00f6nleyebilirsiniz.  B\u00fcy\u00fck listelerde ko\u015fullu render i\u015flemlerini optimize etmek i\u00e7in bu direktifleri etkili bir \u015fekilde kullanman\u0131z performans\u0131 olumlu etkiler.  Yani, ko\u015fullu olarak render edilecek \u00f6\u011feleriniz varsa, bu direktifleri verimli bir \u015fekilde kullanmaya dikkat etmelisiniz.<\/p>\n
Virtual Scroll (Sanal Kayd\u0131rma) Tekni\u011fi<\/h2>\n
B\u00fcy\u00fck listelerde performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran bir teknik ise virtual scroll’dur.  Virtual scroll, g\u00f6r\u00fcn\u00fcr olmayan \u00f6\u011feleri render etmez.  Sadece ekran \u00fczerinde g\u00f6r\u00fcn\u00fcr olan \u00f6\u011feleri render ederek, performans\u0131 olduk\u00e7a iyile\u015ftirir.  Bu sayede, milyonlarca \u00f6\u011fe i\u00e7eren bir liste bile ak\u0131c\u0131 bir \u015fekilde kayd\u0131r\u0131labilir hale gelir.  Vue i\u00e7in \u00e7e\u015fitli virtual scroll k\u00fct\u00fcphaneleri mevcuttur ve bunlar\u0131 kullanarak uygulaman\u0131zda kolayca virtual scroll’u uygulayabilirsiniz. <\/p>\n
\u00d6rne\u011fin,  bir virtual scroll k\u00fct\u00fcphanesi kullanmak i\u00e7in,  k\u00fct\u00fcphanenin talimatlar\u0131n\u0131 takip ederek, liste \u00f6\u011felerinizi virtual scroll’a entegre edebilirsiniz.  Bu i\u015flem,  liste boyutunu ne kadar b\u00fcy\u00fck olursa olsun,  uygulaman\u0131z\u0131n performans\u0131n\u0131 koruman\u0131za yard\u0131mc\u0131 olur.  Daha detayl\u0131 bilgi i\u00e7in ilgili k\u00fct\u00fcphanenin d\u00f6k\u00fcmantasyonuna bakman\u0131z\u0131 tavsiye ederim.<\/p>\n
Lazy Loading (Tembel Y\u00fckleme) ile Performans Geli\u015ftirme<\/h2>\n
Listedeki t\u00fcm \u00f6\u011feleri ba\u015flang\u0131\u00e7ta y\u00fcklemek yerine,  lazy loading (tembel y\u00fckleme) kullanarak sadece g\u00f6r\u00fcn\u00fcr \u00f6\u011feleri y\u00fckleyebilirsiniz.  Kullan\u0131c\u0131 kayd\u0131rma yapt\u0131k\u00e7a,  gerisi yava\u015f yava\u015f y\u00fcklenir. Bu yakla\u015f\u0131m \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in idealdir ve ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Lazy loading  hem kullan\u0131c\u0131n\u0131n bekleme s\u00fcresini k\u0131salt\u0131r hem de sunucu \u00fczerindeki y\u00fck\u00fc azalt\u0131r. <\/p>\n
Sonu\u00e7<\/h2>\n
B\u00fcy\u00fck listeleri Vue 3 ile verimli bir \u015fekilde y\u00f6netmek i\u00e7in birka\u00e7 \u00f6nemli strateji mevcuttur.  v-for direktifi ile :key \u00f6zelli\u011fini kullanmak, virtual scroll k\u00fct\u00fcphanelerinden yararlanmak ve lazy loading tekni\u011fini uygulamak, uygulaman\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir. Bu y\u00f6ntemleri do\u011fru bir \u015fekilde uygulayarak,  kullan\u0131c\u0131lar\u0131n\u0131za daha h\u0131zl\u0131 ve daha sorunsuz bir deneyim sunabilirsiniz.  Daha fazla bilgi ve Vue ile ilgili di\u011fer ipu\u00e7lar\u0131 i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz. <\/p>\n
Faydal\u0131 Kaynaklar:<\/b><\/p>\n