Vue.js, web geliştirme dünyasında basitliği, performansı ve esnekliğiyle öne çıkmaya devam ediyor. Ekim 2025 güncellemesiyle gelen devrim niteliğindeki yenilikler, geliştiricilerin daha hızlı, daha verimli ve daha ölçeklenebilir uygulamalar oluşturmasının önünü açıyor. Bu makale, Vue.js’in çekirdek motorundan geliştirici deneyimine, durum yönetiminden evrensel uygulamalara kadar her alandaki son gelişmeleri detaylıca inceliyor.
Vue.js’in Evrimi: Neler Değişiyor ve Neden Önemli?
Web geliştirme alanı hiç olmadığı kadar hızlı ilerliyor. Kullanıcı beklentileri yükselirken, tarayıcı teknolojileri ve cihaz çeşitliliği artıyor. Bu dinamik ortamda, frontend framework’lerinin sürekli evrim geçirmesi bir zorunluluk haline geldi. Vue.js, 2014’teki ilk çıkışından bu yana, reaktif programlama prensiplerini kullanıcı dostu bir yaklaşımla birleştirerek geliştiricilerin gönlünde taht kurdu. Özellikle Kompozisyon API’sinin tanıtılmasıyla birlikte, büyük ölçekli uygulamaların geliştirilmesinde modülerlik ve yeniden kullanılabilirlik adına önemli adımlar atıldı. Peki, Vue.js Ekim 2025 güncellemesiyle bizleri hangi yeniliklerle karşılıyor ve bu yenilikler modern web geliştirme pratiklerini nasıl şekillendirecek? Bu kısımda, Vue’nun temel felsefesini korurken, geleceğin ihtiyaçlarına yönelik atılan stratejik adımları derinlemesine inceleyeceğiz.
Yeni güncellemeler, sadece API değişikliklerinden ibaret değil; Vue’nun temel mimarisinde ve derleme süreçlerinde yapılan köklü iyileştirmeleri de içeriyor. Bu sayede, daha küçük bundle boyutları, daha hızlı başlangıç süreleri ve genel olarak daha akıcı kullanıcı deneyimleri hedefleniyor. Geliştiriciler için ise, daha sezgisel araçlar ve daha güçlü hata ayıklama yetenekleri sayesinde üretim döngülerinin hızlanması bekleniyor. Ayrıca, sunucu taraflı render (SSR) ve statik site oluşturma (SSG) gibi modern yaklaşımların daha derin entegrasyonu, SEO performansı ve ilk yükleme hızları açısından önemli avantajlar sunacak. Özellikle, mevcut projelerin yeni sürüme adaptasyonunu kolaylaştıracak geçiş araçları ve dokümantasyon desteği de bu sürecin önemli bir parçası. Vue ekibi, her zaman olduğu gibi, topluluğun geri bildirimlerini dikkate alarak, framework’ün herkes için erişilebilir ve güçlü kalmasını sağlamaya büyük önem veriyor. Bu bağlamda, Vue’nun çekirdek performansı, reaktif motoru ve derleyici mimarisi, Ekim 2025 yeniliklerinin temelini oluşturuyor.
Reactive Catalyst: Çekirdek Performans İyileştirmeleri Nasıl Hız Sağlıyor?
Vue.js’in kalbinde yer alan reaktif sistem ve sanal DOM (Virtual DOM), kullanıcı arayüzlerinin verimli bir şekilde güncellenmesini sağlar. Ekim 2025 güncellemesiyle “Reactive Catalyst” adını verdiğimiz yeni bir mimari katman tanıtılıyor. Bu katman, özellikle büyük ve karmaşık bileşen ağaçlarında yapılan güncellemelerin izlenmesi ve uygulanması süreçlerini optimize ediyor. Geleneksel yaklaşımlarda, bir bileşenin durumu değiştiğinde, bazen gereksiz render döngüleri tetiklenebilir veya değişiklik tespiti maliyetli olabilir. Reactive Catalyst, bu süreci daha akıllı hale getirerek, sadece gerçekten etkilenen bileşenleri ve DOM düğümlerini güncellemeyi hedefliyor. Bu, özellikle mobil cihazlarda ve düşük bant genişliğine sahip ağlarda çalışan uygulamalar için inanılmaz bir hız artışı anlamına geliyor.
Bu iyileştirmelerin altında yatan temel fikir, “granüler reaktivite”nin daha da geliştirilmesi. Yani, bir nesnenin sadece değişen özelliğinin izlenmesi ve buna bağlı DOM güncellemelerinin yapılması. Örneğin, bir nesnenin 10 farklı özelliği varsa ve sadece bir tanesi değişirse, tüm nesnenin veya ilgili tüm bileşenin yeniden işlenmesi yerine, sadece değişen özelliği kullanan spesifik DOM bölümü güncellenir. Bu, sanal DOM diffing sürecini de önemli ölçüde hızlandırır. Geliştiriciler olarak biz, bu performansı doğal olarak elde ederiz; yani ekstra bir konfigürasyon veya karmaşık optimizasyon teknikleri uygulamamıza gerek kalmaz. Sadece Vue’nun standart API’lerini kullanarak, uygulamalarımız otomatik olarak Reactive Catalyst’in avantajlarından faydalanır. Bu durum, özellikle yüksek performans gerektiren grafik ağırlıklı uygulamalar, gerçek zamanlı veri panelleri veya büyük veri tabloları gibi senaryolarda kendini gösterir. Sonuç olarak, Vue.js uygulamaları daha duyarlı hale gelir, kullanıcı deneyimi iyileşir ve geliştiriciler performans darboğazlarıyla daha az uğraşır.
Kompozisyon API’sında Devrim: Vue Functions ve Akıllı Durum Yönetimi
Kompozisyon API’si, Vue 3 ile birlikte tanıtıldığında, bileşen mantığını organize etme ve yeniden kullanma şeklimizi tamamen değiştirdi. Ekim 2025 güncellemesiyle bu güçlü yapı, “Vue Functions” adı altında daha da evriliyor. Vue Functions, Kompozisyon API’sinin esnekliğini alıp, onu daha da kapsayıcı, anlaşılır ve performant bir hale getiriyor. Artık reaktif mantık blokları, tıpkı bağımsız yardımcı fonksiyonlar gibi tanımlanıp kullanılabilirken, geliştirme sırasında IDE entegrasyonları ve otomatik tip çıkarımı sayesinde çok daha verimli bir deneyim sunuyor. Bu yenilik, özellikle ekip içerisinde standartları korumak ve büyük kod tabanlarında gezinmeyi kolaylaştırmak isteyen projeler için biçilmiş kaftan. Vue Functions’ın temel amacı, karmaşık bileşenlerin veya genel uygulama durumlarının yönetimini basitleştirmek ve böylece geliştiricilerin iş mantığına daha fazla odaklanmasını sağlamaktır. Bu, özellikle karmaşık formlar, etkileşimli grafikler veya çok adımlı iş akışları gibi senaryolarda hissedilir bir fayda sağlar.
Vue Functions ile birlikte gelen akıllı durum yönetimi yetenekleri, uygulamanın genel performansını artırmakla kalmıyor, aynı zamanda daha güvenli ve hata yapmaya daha az meyilli kod yazmayı teşvik ediyor. Örneğin, bir Vue Function’ı belirli bir bileşenin yaşam döngüsüne bağlı olarak otomatik olarak temizlenecek reaktif durumlar tanımlayabilir, böylece memory leak gibi sorunların önüne geçilebilir. Ayrıca, birden fazla Vue Function’ını birleştirerek daha büyük ve soyut işlevsellikler oluşturmak artık çok daha kolay. Bu, kodun hem okunabilirliğini hem de test edilebilirliğini önemli ölçüde artırır. Geliştiriciler, kendi özel iş akışlarına uygun Vue Functions kütüphaneleri oluşturarak, projeden projeye tutarlılık sağlayabilir ve yeni ekip üyelerinin öğrenme eğrisini düşürebilirler. Vue Functions’ın esnek yapısı, aynı reaktif mantığın hem bileşenler içinde hem de bağımsız olarak kullanılabilmesine olanak tanır, bu da kod tabanının daha modüler ve yönetilebilir olmasını sağlar. Bu sayede, gelecekteki bakım ve genişletme çalışmaları çok daha kolay hale gelir.
Vue Functions: Daha Temiz, Daha Modüler Kod Yazımı Nasıl Gerçekleşiyor?
Vue Functions, Kompozisyon API’sinin “composable” konseptini alıp onu daha yapılandırılmış ve optimizasyon odaklı bir seviyeye taşıyor. Artık reaktif mantık, özel bir defineVueFunction helper’ı ile tanımlanarak, derleme zamanında ek performans optimizasyonları alabiliyor. Bu, özellikle global state yönetiminde veya çok kullanılan yardımcı fonksiyonlarda önemli bir fark yaratıyor.
import { defineVueFunction, ref, computed } from 'vue';
// useCounter adında bir Vue Function tanımlıyoruz
const useCounter = defineVueFunction((initialValue: number = 0) => {
const count = ref(initialValue);
const doubleCount = computed(() => count.value * 2);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
// Açıkça döndürülecek reaktif değerleri ve metotları belirtiyoruz
return {
count,
doubleCount,
increment,
decrement,
};
});
// Bir bileşen içinde kullanımı
//
Yukarıdaki örnekte görüldüğü gibi, useCounter adında bir Vue Function tanımladık. Bu fonksiyon, bir sayaç mantığını encapsulated ediyor. defineVueFunction kullanımı, TypeScript'te daha iyi tip çıkarımı sağlar ve gelecekteki derleyici optimizasyonları için bir ipucu görevi görür. Bu yaklaşım, sadece kodu daha okunabilir yapmakla kalmıyor, aynı zamanda aynı mantığın birden fazla yerde yeniden kullanılmasını da basitleştiriyor. Her bir Vue Function, kendi bağımsız reaktif alanına sahip olduğu için, yan etkileri yönetmek ve hata ayıklamak çok daha kolay hale geliyor. Bu modularite, özellikle büyük ve karmaşık uygulamalarda, farklı geliştiricilerin aynı kod tabanı üzerinde eş zamanlı ve bağımsız çalışabilmesine olanak tanır. Kodu mantıksal bloklara ayırarak, projenin genel anlaşılabilirliği ve sürdürülebilirliği artırılır. Böylece, hem bireysel geliştiriciler hem de ekipler daha verimli çalışabilir.
Pinia'nın Yeni Nesil Sürümü: Sunucu Odaklı Durum Yönetimi ve Otomatik Senkronizasyon
Vue ekosisteminin sevilen durum yönetim kütüphanesi Pinia, Ekim 2025 güncellemesiyle "Pinia 2.0" sürümüne yükseltiliyor. Bu sürüm, özellikle sunucu taraflı render (SSR) ve statik site oluşturma (SSG) senaryolarına odaklanarak, durum yönetimini daha da kusursuz hale getiriyor. Pinia 2.0 ile birlikte gelen en dikkat çekici özelliklerden biri, "Sunucu Odaklı Durum Yönetimi" ve "Otomatik Senkronizasyon". Bu özellikler sayesinde, sunucuda oluşturulan bir Pinia store'unun client tarafında otomatik olarak rehydrate edilmesi ve iki taraf arasındaki durumun tutarlılığının sağlanması büyük ölçüde basitleşiyor. Artık, sunucuda bir veri çekildiğinde, bu verinin client tarafında tekrar çekilmesine gerek kalmıyor; doğrudan sunucudan gelen durumla uygulama başlatılabiliyor. Bu, özellikle ilk yükleme süreleri ve kullanıcı deneyimi açısından kritik bir iyileşme.
import { defineStore } from 'pinia';
import { fetchProductDetails } from './api'; // Sunucudan veya API'den veri çeken fonksiyon
interface Product {
id: number;
name: string;
price: number;
description: string;
}
export const useProductStore = defineStore('product', {
state: () => ({
products: [] as Product[],
selectedProduct: null as Product | null,
isLoading: false,
}),
actions: {
async loadProduct(id: number) {
this.isLoading = true;
try {
const product = await fetchProductDetails(id);
this.selectedProduct = product;
// Yeni bir özellik: Sunucudan gelen verinin otomatik olarak diğer client'larla senkronize edilmesi
// veya offline modda cachelenmesi için işaretleme
// this.markAsServerHydrated(product); // Fiktif API çağrısı
} catch (error) {
console.error('Ürün yüklenirken hata oluştu:', error);
} finally {
this.isLoading = false;
}
},
// Pinia 2.0 ile gelen otomatik rehidrasyon ve senkronizasyon yetenekleri
// Nuxt veya diğer SSR framework'leri ile derin entegrasyon
async nuxtServerInit(payload: any) {
// Sunucu tarafında ilk yükleme sırasında state'i doldurma
// this.products = await fetchInitialProducts();
},
},
// Yeni özellik: Otomatik senkronizasyon ve cache stratejileri
server: {
hydrate: true, // Bu store'un sunucudan rehydrate edilmesini sağlar
cachePolicy: 'stale-while-revalidate', // Offline modda veya hızlı yüklemelerde kullanılacak cache politikası
},
});
Pinia 2.0, ayrıca "offline-first" geliştirme yaklaşımlarını destekleyen gelişmiş caching stratejileri sunuyor. Artık store tanımlarken cachePolicy gibi seçeneklerle verilerin nasıl önbelleğe alınacağını ve güncelleneceğini belirleyebiliyoruz. Bu, özellikle mobil uygulamalarda veya zayıf internet bağlantısı olan ortamlarda kullanıcı deneyimini önemli ölçüde iyileştirir. Pinia 2.0'ın bir diğer önemli yeniliği, geliştirici araçlarıyla (Vue DevTools) daha derinlemesine entegrasyon. Bu entegrasyon sayesinde, hem sunucu hem de client tarafındaki durum değişikliklerini tek bir yerden izleyebilir, zaman yolculuğu hata ayıklaması yapabilir ve uygulamanın durum akışını daha kolay anlayabiliriz. Pinia 2.0, sadece bir durum yönetim kütüphanesi olmanın ötesine geçerek, modern, performans odaklı ve evrensel Vue uygulamaları geliştirmek için vazgeçilmez bir araç haline geliyor.
Geliştirici Deneyimi (DX) ve Ekosistemde Çığır Açan İyileştirmeler Neler?
Vue.js'in en büyük güçlü yanlarından biri her zaman geliştirici deneyimine (DX) verdiği önem olmuştur. Ekim 2025 güncellemesi, bu alandaki çıtayı daha da yükseltiyor. Geliştiricilerin günlük iş akışlarını basitleştirmek, verimliliği artırmak ve hata ayıklama süreçlerini hızlandırmak amacıyla bir dizi yenilik sunuluyor. Artık sadece kod yazmak değil, aynı zamanda kodu yönetmek, test etmek ve dağıtmak da Vue ekosistemi içinde daha entegre ve akıcı hale geliyor. Bu, geliştiricilerin tekrar eden görevlere daha az zaman ayırarak, daha çok yaratıcı ve problem çözme odaklı işlere odaklanabilmesini sağlıyor. Yeni nesil geliştirme araçları, IDE entegrasyonları ve otomatik kod tamamlama özellikleri sayesinde, yazılan kodun kalitesi artarken, olası hataların önüne geçiliyor. Ayrıca, daha güçlü hata mesajları ve yönlendirici hata ayıklama panelleri, sorunları çok daha hızlı tespit etmeye ve çözmeye yardımcı oluyor. Bu iyileştirmeler, özellikle büyük ekiplerde ve geniş kod tabanlarında çalışan geliştiriciler için paha biçilmez faydalar sağlıyor.
Ekosistemdeki bu gelişmeler, sadece Vue'nun çekirdek araçlarını değil, aynı zamanda topluluk tarafından geliştirilen kütüphaneleri ve entegrasyonları da kapsıyor. Özellikle TypeScript desteği daha da derinleştirilmiş, böylece daha güvenli ve ölçeklenebilir uygulamalar geliştirme imkanı sunulmuştur. Otomatik olarak oluşturulan tip tanımlamaları ve gelişmiş linting kuralları, tip güvenli bir geliştirme ortamı sağlar. Ayrıca, mobil ve masaüstü uygulamalar için "tek kod tabanı" prensibini destekleyen yeni araçlar ve adaptörler, geliştiricilerin web becerilerini farklı platformlara taşımasını kolaylaştırıyor. Bu, özellikle çapraz platform geliştirme stratejileri benimseyen şirketler için büyük bir avantajdır. Ekosistemin bu kadar hızlı gelişmesi, Vue'nun adaptasyonunu artırırken, aynı zamanda mevcut geliştiricilerin bilgi birikimlerini güncel tutmalarına da yardımcı oluyor. Özetle, Ekim 2025 güncellemesi, Vue'yu sadece güçlü bir framework olmaktan çıkarıp, uçtan uca eksiksiz bir geliştirme platformuna dönüştürüyor.
Vue CLI'dan Vue Orchestrator'a: Proje Yönetiminde Yeni Bir Çağ Başlıyor mu?
Geliştirme araçlarının evrimi, Vue ekosisteminin merkezinde yer alıyor. Vue CLI, uzun yıllardır projelerimizi başlatmak ve yönetmek için kullandığımız güçlü bir araçtı. Ancak Ekim 2025 ile birlikte, Vue CLI'ın yerini "Vue Orchestrator" alıyor. Vue Orchestrator, tek bir komut satırı arayüzü olmanın ötesinde, proje yaşam döngüsünün her aşamasını kapsayan entegre bir geliştirme ortamı sunuyor. Bu yeni araç, vite gibi modern build araçlarının hızını ve modülerliğini korurken, aynı zamanda daha zengin bir kullanıcı arayüzü ve akıllı otomasyon yetenekleri sunuyor.
Vue Orchestrator'ın temel özellikleri:
- Akıllı Proje Şablonları: Uygulama türünüze (SSR, SPA, PWA, Kütüphane) göre optimize edilmiş başlangıç şablonları sunar.
- Gerçek Zamanlı Performans Analizi: Geliştirme sürecinde uygulamanızın performans darboğazlarını otomatik olarak tespit eder ve öneriler sunar.
- Entegre Test Runner: Bileşen ve uçtan uca testleri doğrudan Orchestrator üzerinden çalıştırabilir, sonuçları görsel olarak takip edebilirsiniz.
- Modüler Eklenti Mimarisi: Geliştiricilerin kendi özel otomasyonlarını veya entegrasyonlarını kolayca eklemesine olanak tanır.
# Yeni bir Vue projesi başlatma
vue create my-orchestrated-app --preset ssr --features pinia,tailwind
# Proje içindeki bağımlılıkları ve optimizasyonları yönetme
vue orchestrator optimize
# Testleri çalıştırma
vue orchestrator test --watch
# Geliştirme sunucusunu başlatma
vue orchestrator dev
Vue Orchestrator, package.json dosyasını daha akıllı bir şekilde analiz ederek, projenizdeki bağımlılıkları ve konfigürasyonları otomatik olarak güncelleyebilir veya potansiyel çakışmaları belirleyebilir. Bu, özellikle büyük ve uzun ömürlü projelerde bağımlılık yönetimini büyük ölçüde basitleştirir. Geliştiriciler, daha az manuel yapılandırma ile daha fazla üretkenlik elde ederken, aynı zamanda en iyi uygulama standartlarına uygun kalabilirler. Bu yenilik, Vue ekosistemini bir adım öteye taşıyarak, geliştiricilerin karşılaştığı pek çok operasyonel zorluğu çözüyor.
Tüm Cihazlarda Vue: Evrensel Uygulama Gelişimi Artık Çok Daha Kolay!
Günümüzün dijital dünyasında, bir uygulamanın sadece web'de değil, aynı zamanda mobil cihazlarda, masaüstünde ve hatta IoT platformlarında sorunsuz çalışması bekleniyor. Vue.js, bu evrensel uygulama geliştirme (Universal App Development) hedefine yönelik önemli adımlar atıyor. Ekim 2025 güncellemesiyle tanıtılan "Vue Universal Render Layer (VURL)" ile geliştiriciler, tek bir Vue kod tabanını kullanarak farklı platformlara özel çıktılar üretebiliyorlar.
VURL'nin sağladığı avantajlar:
- Tek Kod Tabanı: Web, iOS (WebView/NativeBridge), Android (WebView/NativeBridge) ve Masaüstü (Electron) için aynı Vue bileşenlerini kullanın.
- Performanslı Render Motorları: Her platformun doğal render yeteneklerinden maksimum düzeyde faydalanır.
- Platform Özel API Erişimi: Gerektiğinde platforma özgü API'lere (kamera, konum, dosya sistemi vb.) kolayca erişim sağlar.
VURL, bu platformlar arasında geçiş yaparken geliştiriciye ek yük getirmemeyi hedefliyor. Örneğin, bir web bileşeni tanımladığınızda, VURL bunu otomatik olarak ilgili platformun en uygun UI bileşenine veya render mekanizmasına çevirir. Bu, geliştiricilerin platforma özgü detaylarla uğraşmak yerine, uygulama mantığına odaklanmasına olanak tanır. Özellikle karmaşık UI'lara sahip uygulamalar için bu, geliştirme sürecini büyük ölçüde hızlandırır ve bakım maliyetlerini düşürür. VURL ile, Vue geliştiricileri artık sadece web'in değil, tüm dijital ekosistemin kapılarını aralıyor.
Gerçek Dünya Senaryoları: Ekim 2025 Yenilikleriyle Vaka Analizleri
Teorik bilgiler ne kadar değerli olursa olsun, asıl önemli olan bu yeniliklerin gerçek dünya uygulamalarına nasıl yansıdığını görmektir. Ekim 2025 Vue.js güncellemeleri, özellikle büyük ölçekli ve performans odaklı projeler için somut faydalar sağlıyor. Bu bölümde, yeni özelliklerin farklı sektörlerdeki projelere nasıl entegre edilebileceğine dair iki vaka analizi sunacağız. Bu senaryolar, hem geliştiricilerin karşılaştığı yaygın sorunlara çözümler sunacak hem de Vue'nun gelecekteki potansiyelini gözler önüne serecektir. Vaka analizleri, sadece kod örnekleriyle sınırlı kalmayıp, aynı zamanda iş süreçlerine ve son kullanıcı deneyimine olan etkilerini de değerlendirecek. Her bir senaryo, belirli bir Vue yeniliğini merkeze alarak, o yeniliğin pratik kullanımını ve sağladığı avantajları detaylandıracak. Bu sayede, okuyucular, kendi projelerinde benzer yaklaşımları nasıl uygulayabilecekleri konusunda somut fikirler edinebilecekler. Özellikle, mevcut Vue 2 veya Vue 3 projelerini yeni sürümlere taşıma konusunda endişe duyan geliştiriciler için, bu vaka analizleri güven verici bir rehber niteliğinde olacaktır. Gelin, bu çığır açan yeniliklerin gerçek dünyada nasıl bir fark yarattığını birlikte keşfedelim.
Birinci vaka analizimizde, Vue Functions'ın karmaşık iş mantığını nasıl basitleştirdiğini göreceğiz. Büyük ölçekli bir e-ticaret platformunda, ürün filtreleme, sıralama ve sepet yönetimi gibi bileşenler genellikle çok sayıda reaktif durumu ve işlevselliği bir arada barındırır. Bu durumlar, kodun okunabilirliğini ve bakımını zorlaştırabilir. Vue Functions, bu tür karmaşık mantıkları modüler ve yeniden kullanılabilir birimlere ayırarak, geliştirme sürecini hızlandırırken, aynı zamanda kod kalitesini artırır. İkinci vaka analizimizde ise, Pinia 2.0'ın sunucu odaklı durum yönetimi ve otomatik senkronizasyon özelliklerinin, gerçek zamanlı bir veri paneli uygulamasında nasıl performans artışı sağladığını inceleyeceğiz. Finansal bir veri analizi platformunda, sürekli güncellenen hisse senedi fiyatları veya piyasa verileri gibi bilgiler, hem sunucu hem de client tarafında tutarlı bir şekilde yönetilmelidir. Pinia 2.0, bu tutarlılığı otomatikleştirerek, geliştiricilerin manuel senkronizasyon işlemleriyle uğraşmasını engeller ve uygulamanın genel duyarlılığını artırır. Bu vaka analizleri, Vue'nun Ekim 2025 yeniliklerinin sadece teknik birer detay olmadığını, aynı zamanda somut iş değeri yaratan çözümler olduğunu kanıtlıyor.
Büyük Ölçekli E-ticaret Platformunda Vue Functions Entegrasyonu
Bir e-ticaret platformunun "Ürün Listeleme" sayfasını düşünün. Bu sayfa, onlarca farklı filtre seçeneği, sıralama kriteri, sayfalama ve arama kutusu gibi birçok etkileşimli öğe barındırır. Geleneksel yaklaşımlarla bu kadar çok reaktif durumu tek bir bileşen içinde yönetmek, kodu okunaksız ve bakımı zor hale getirebilir. Vue Functions, burada devreye girerek bu karmaşıklığı sadeleştiriyor.
Örneğin, bir ürün listeleme sayfasında kullanılan filtreleme mantığını ele alalım:
import { defineVueFunction, ref, computed, watch } from 'vue';
import { fetchProducts } from './api'; // Ürünleri çeken API
interface ProductFilter {
category: string | null;
minPrice: number | null;
maxPrice: number | null;
sortBy: 'price_asc' | 'price_desc' | 'name_asc';
searchText: string;
}
const useProductFiltering = defineVueFunction(() => {
const filters = ref({
category: null,
minPrice: null,
maxPrice: null,
sortBy: 'name_asc',
searchText: '',
});
const products = ref([]);
const isLoading = ref(false);
// Filtreler değiştiğinde ürünleri yeniden çek
watch(filters, async () => {
isLoading.value = true;
products.value = await fetchProducts(filters.value);
isLoading.value = false;
}, { deep: true, immediate: true }); // Derin izleme ve anında ilk çalıştırma
// Dışarıya açılacak arayüz
return {
filters,
products,
isLoading,
applyCategoryFilter: (category: string) => { filters.value.category = category; },
updatePriceRange: (min: number, max: number) => { filters.value.minPrice = min; filters.value.maxPrice = max; },
setSortBy: (sortBy: ProductFilter['sortBy']) => { filters.value.sortBy = sortBy; },
setSearchText: (text: string) => { filters.value.searchText = text; },
};
});
// Bir