Modern web uygulamalar\u0131, s\u00fcrekli de\u011fi\u015fen verilerle dinamik bir \u015fekilde etkile\u015fim kurma ihtiyac\u0131 duyar. Kullan\u0131c\u0131 aray\u00fczlerinin, temel veri kaynaklar\u0131ndaki de\u011fi\u015fikliklere an\u0131nda tepki vermesi, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u0130\u015fte bu noktada reaktif veri ak\u0131\u015flar\u0131 devreye girer. Vue.js, temelden reaktif olacak \u015fekilde tasarlanm\u0131\u015f bir JavaScript \u00e7er\u00e7evesidir ve bu \u00f6zelli\u011fi sayesinde karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netmek i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r. Bu rehberde, Vue.js’in g\u00fcc\u00fcn\u00fc kullanarak nas\u0131l sa\u011flam, y\u00f6netilebilir ve reaktif bir veri ak\u0131\u015f\u0131 olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. API’lerden gelen verileri almaktan, bu verileri d\u00f6n\u00fc\u015ft\u00fcrmeye, hata y\u00f6netiminden performansa kadar t\u00fcm s\u00fcreci ele alaca\u011f\u0131z.<\/p>\n
Reaktiflik, bir veri par\u00e7as\u0131n\u0131n de\u011fi\u015fti\u011finde, bu veriye ba\u011fl\u0131 olan t\u00fcm bile\u015fenlerin ve hesaplamalar\u0131n otomatik olarak g\u00fcncellenmesi yetene\u011fidir. Vue.js’in temelinde yatan bu mekanizma, manuel DOM manip\u00fclasyonu ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve geli\u015ftiricilerin veri durumuna odaklanmas\u0131n\u0131 sa\u011flar. Bir “reaktif veri ak\u0131\u015f\u0131” ise, verinin bir kaynaktan al\u0131n\u0131p, \u00e7e\u015fitli d\u00f6n\u00fc\u015f\u00fcm ve i\u015fleme ad\u0131mlar\u0131ndan ge\u00e7erek nihayetinde kullan\u0131c\u0131 aray\u00fcz\u00fcne ula\u015fmas\u0131na kadar olan t\u00fcm s\u00fcreci ifade eder. Bu ak\u0131\u015f i\u00e7indeki herhangi bir veri par\u00e7as\u0131n\u0131n de\u011fi\u015fimi, zincirleme bir reaksiyonla t\u00fcm ilgili k\u0131s\u0131mlar\u0131 g\u00fcnceller.<\/p>\n
Vue 3’te reaktiflik, * Reaktif veri ak\u0131\u015f\u0131n\u0131n ba\u015flang\u0131c\u0131, verinin al\u0131nd\u0131\u011f\u0131 kaynakt\u0131r. Bu kaynaklar genellikle REST API’leri, GraphQL u\u00e7 noktalar\u0131, WebSocket ba\u011flant\u0131lar\u0131 veya hatta yerel depolama olabilir. Vue bile\u015fenlerinizde veya durum y\u00f6netimi \u00e7\u00f6z\u00fcmlerinizde (Pinia\/Vuex) bu verileri al\u0131p reaktif duruma entegre etmeniz gerekir.<\/p>\n API’lerden veri \u00e7ekmek i\u00e7in genellikle \u00dcr\u00fcnler y\u00fckleniyor...<\/p>\n {{ hataMesaji }}<\/p>\n ref<\/code> ve reactive<\/code> API’leri ile sa\u011flan\u0131r:<\/p>\nref<\/code>: Temel de\u011ferleri (string, number, boolean) reaktif hale getirmek i\u00e7in kullan\u0131l\u0131r. .value<\/code> \u00f6zelli\u011fi ile eri\u015filir ve de\u011fi\u015ftirilir.
\n* reactive<\/code>: Nesneleri (object, array, Map, Set) reaktif proxy’lere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Do\u011frudan nesnenin \u00f6zelliklerine eri\u015filir ve de\u011fi\u015ftirilir.<\/p>\nimport { ref, reactive, computed, watch } from 'vue';\n\n\/\/ ref ile reaktif bir say\u0131\nconst sayac = ref(0);\nconsole.log(sayac.value); \/\/ 0\nsayac.value++;\nconsole.log(sayac.value); \/\/ 1\n\n\/\/ reactive ile reaktif bir nesne\nconst kullanici = reactive({\n ad: 'Ali',\n soyad: 'Y\u0131lmaz',\n yas: 30\n});\nconsole.log(kullanici.ad); \/\/ Ali\nkullanici.yas = 31;\nconsole.log(kullanici.yas); \/\/ 31\n\n\/\/ computed ile t\u00fcretilmi\u015f reaktif durum\nconst tamAd = computed(() => {\n return ${kullanici.ad} ${kullanici.soyad}<\/code>;\n});\nconsole.log(tamAd.value); \/\/ Ali Y\u0131lmaz\n\n\/\/ watch ile yan etkileri izleme\nwatch(sayac, (yeniDeger, eskiDeger) => {\n console.log(Sayac de\u011fi\u015fti: ${eskiDeger} -> ${yeniDeger}<\/code>);\n});\n\nsayac.value = 5; \/\/ Konsola \"Sayac de\u011fi\u015fti: 1 -> 5\" yazd\u0131r\u0131r<\/code><\/pre>\ncomputed<\/code> \u00f6zellikleri, mevcut reaktif duruma dayal\u0131 olarak yeni reaktif durumlar t\u00fcretmek i\u00e7in kullan\u0131l\u0131r. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131rlar ve pahal\u0131 hesaplamalar\u0131 \u00f6nlemek i\u00e7in \u00f6nbelle\u011fe al\u0131n\u0131rlar. watch<\/code> ise, bir veya daha fazla reaktif veriyi izlemek ve bu veriler de\u011fi\u015fti\u011finde belirli bir yan etkiyi (\u00f6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131 yapmak, yerel depolamaya kaydetmek) ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu temel yap\u0131 ta\u015flar\u0131, karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131n in\u015fas\u0131nda bize b\u00fcy\u00fck esneklik sa\u011flar.<\/p>\nVeri Kaynaklar\u0131ndan Ak\u0131\u015f Olu\u015fturma<\/h3>\n
fetch<\/code> API’si veya pop\u00fcler axios<\/code> k\u00fct\u00fcphanesi kullan\u0131l\u0131r. axios<\/code>, \u00f6zellikle istek ve yan\u0131t interceptor’lar\u0131, otomatik JSON d\u00f6n\u00fc\u015f\u00fcm\u00fc ve hata y\u00f6netimi gibi \u00f6zellikleriyle tercih edilir.<\/p>\n\/\/ src\/components\/UrunListesi.vue\n\n \u00dcr\u00fcnler<\/h2>\n
\n