Merhaba arkadaşlar, bugün başımı çok ağrıtan bir performans sorununu ve Vue 3'ün bize sunduğu harika bir çözümü anlatacağım. Bir admin paneli üzerinde çalışıyordum ve kullanıcı listesi, filtreleme, sıralama gibi işlemlerde sayfa gittikçe ağırlaşmaya başladı. İlk başta "Bu kadar veriyle mi kasıyor?" diye düşündüm ama işin aslı Vue'un reaktivite sisteminin derinliklerindeydi.
Karşılaştığım Sorun
Projemde, sunucudan gelen ve içinde onlarca kullanıcı nesnesi barındıran büyük bir veri yapısı vardı. Her kullanıcının kendi içinde adres, tercihler, geçmiş işlemler gibi derin (nested) özellikleri bulunuyordu. Normal `reactive()` ile bu nesneyi sarmaladığımda, Vue tüm bu iç içe geçmiş özellikleri de reaktif hale getiriyordu. Bu da, özellikle liste üzerinde basit bir sıralama veya filtreleme yaparken gereksiz ve maliyetli reaktivite işlemlerine yol açıyordu. Sayfada hissedilir bir gecikme oluşmuştu.
Shallow Reactive Nedir?
Vue 3'ün bize sunduğu `shallowReactive()` fonksiyonu, bir nesneyi sadece bir seviye derinlikte (shallow) reaktif hale getirir. Yani, nesnenin kendisinin özellikleri değiştiğinde (yeni özellik ekleme, silme veya doğrudan değer atama) reaktivite tetiklenir, ancak bu özelliklerin içindeki derin nesneler reaktif olmaz. Bu, büyük ve karmaşık nesnelerde inanılmaz bir performans kazancı sağlar.
Benim Uyguladığım Çözüm
İşte benim kullandığım en temiz çözüm. İlk olarak, sunucudan gelen ham veriyi `shallowReactive` ile sarmaladım. Ana liste üzerinde yapacağım tüm işlemler (sıralama, filtreleme, sayfalama) artık sadece bu sığ reaktif nesne üzerinde çalışacak.
Peki, bu kullanıcıların detay sayfalarında veya formlarında bu derin özellikleri değiştirmem gerektiğinde ne yaptım? O zaman sadece o spesifik nesneyi, ihtiyaç anında reaktif hale getirdim.
Karşılaştığım SorunProjemde, sunucudan gelen ve içinde onlarca kullanıcı nesnesi barındıran büyük bir veri yapısı vardı. Her kullanıcının kendi içinde adres, tercihler, geçmiş işlemler gibi derin (nested) özellikleri bulunuyordu. Normal `reactive()` ile bu nesneyi sarmaladığımda, Vue tüm bu iç içe geçmiş özellikleri de reaktif hale getiriyordu. Bu da, özellikle liste üzerinde basit bir sıralama veya filtreleme yaparken gereksiz ve maliyetli reaktivite işlemlerine yol açıyordu. Sayfada hissedilir bir gecikme oluşmuştu.
Shallow Reactive Nedir?Vue 3'ün bize sunduğu `shallowReactive()` fonksiyonu, bir nesneyi sadece bir seviye derinlikte (shallow) reaktif hale getirir. Yani, nesnenin kendisinin özellikleri değiştiğinde (yeni özellik ekleme, silme veya doğrudan değer atama) reaktivite tetiklenir, ancak bu özelliklerin içindeki derin nesneler reaktif olmaz. Bu, büyük ve karmaşık nesnelerde inanılmaz bir performans kazancı sağlar.
Benim Uyguladığım Çözümİşte benim kullandığım en temiz çözüm. İlk olarak, sunucudan gelen ham veriyi `shallowReactive` ile sarmaladım. Ana liste üzerinde yapacağım tüm işlemler (sıralama, filtreleme, sayfalama) artık sadece bu sığ reaktif nesne üzerinde çalışacak.
JavaScript:
import { shallowReactive, computed } from 'vue';
// Sunucudan gelen büyük ve derin nesne
const rawUserData = await fetchUsers(); // Diyelim ki bu, 1000+ kullanıcı döndürüyor.
// Performans için Shallow Reactive kullanıyoruz
const users = shallowReactive(rawUserData);
// Ana listeyi manipüle eden bir fonksiyon (örneğin sıralama)
function sortUsersByDate() {
users.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
// Bu işlem, `users` dizisinin kendisi değiştiği için reaktiviteyi tetikler.
// Ancak her bir `user` nesnesinin içindeki `address` gibi nesneler reaktif DEĞİLDİR.
}Peki, bu kullanıcıların detay sayfalarında veya formlarında bu derin özellikleri değiştirmem gerektiğinde ne yaptım? O zaman sadece o spesifik nesneyi, ihtiyaç anında reaktif hale getirdim.
JavaScript:
// Detay bileşeni içinde veya bir form işleminde
function openUserDetail(userIndex) {
// Sadece seçilen kullanıcıyı derinlemesine reaktif yap
const detailedUser = reactive(users[userIndex]);
// Artık detailedUser.address.city değişikliği bile takip edilir
detailedUser.address.city = 'İstanbul';
// Ana `users` listesindeki ilgili elemanı güncelle
users[userIndex] = detailedUser;
}[/COLOR]
[COLOR=#9B59B6]📊 Sonuç ve Performans Kazanımı[/COLOR]
Bu yönteme geçtikten sonra, liste işlemlerindeki gecikme neredeyse sıfırlandı. Vue artık her bir kullanıcının içindeki yüzlerce özelliği izlemek zorunda kalmadığı için bellek kullanımı da düştü. En kritik nokta şu: Eğer veri yapınız büyük ve çoğunlukla üst seviye işlemler (liste manipülasyonu) yapıyorsanız, `shallowReactive` veya `shallowRef` kesinlikle göz ardı etmemeniz gereken bir özellik.
Siz de Vue 3'te büyük veri setleri ile çalışırken benzer performans sıkıntıları yaşadınız mı? `shallowReactive` veya `shallowRef` dışında bu tarz sorunlar için kullandığınız farklı bir yöntem, örneğin virtual scrolling kütüphaneleri veya manual reaktivite yönetimi var mı? Yorumlarda deneyimlerinizi paylaşın, tartışalım!