İleri Düzey Reaktivite: shallowRef ve triggerRef
Performans için shallowRef, reaktivite dışında bırakmak için markRaw ve elle tetiklemek için triggerRef.
İleri Düzey Reaktivite: shallowRef ve triggerRef, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
ref ve reactive'in Ötesi
Vue'nun derin reaktivitesi kullanışlıdır, ancak her zaman istediğiniz şey olmayabilir. Büyük nesneler veya harici örnekler için derin izleme verimsizdir. Vue, hassas denetim için shallowRef, triggerRef ve markRaw sunar.
ref Derinlemesine Nasıl İzler
Nesne tutan normal bir ref, nesnenin tamamını derinlemesine reaktif hâle getirir — iç içe geçmiş herhangi bir özelliğin değiştirilmesi güncellemeleri tetikler. Küçük state için harikadır, büyük yapılar içinse maliyetlidir.
import { ref } from "vue"
const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)shallowRef: Yalnızca .value Reaktiftir
shallowRef, .value'nun yeniden atanmasını izler ancak tutulan değerin içindeki değişiklikleri izlemez. İç değişiklikler görüntülemeleri tetiklemez.
import { shallowRef } from "vue"
const state = shallowRef({ count: 0 })
state.value.count++ // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)shallowRef Ne Zaman Kullanılmalı
Onu, bütünüyle değiştirdiğiniz büyük ve büyük ölçüde değişmez veriler için veya derin izlemenin hiçbir fayda sağlamadan ek yük oluşturduğu harici nesneleri (bir chart örneği ya da büyük bir veri kümesi) sarmalamak için kullanın.
const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesaleDerin Değişiklik Sorunu
Bazen (performans için) bir shallowRef içinde DO ile değişiklik yaparsınız; ancak yine de kontrollü bir anda yeniden oluşturma gerekir. Vue bu değişikliği göremez, bu nedenle kullanıcı arayüzü güncelliğini yitirir.
const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires<code>triggerRef</code>: Güncellemeyi Zorlamak
triggerRef, içeriğini değiştirdikten sonra sığ bir referansa bağlı efektleri elle yeniden çalıştırmaya zorlar. Birçok değişikliği toplu olarak yapar, ardından yalnızca bir kez tetiklersiniz.
import { shallowRef, triggerRef } from "vue"
const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updatesBir Performans Deseni
Bu desen şöyledir: büyük bir yapıyı shallowRef içinde tutar, her değişiklikteki reaktivite maliyeti olmadan istediğiniz gibi değiştirir, ardından görünümün bu toplu değişikliği yansıtmasını istediğinizde triggerRef işlevini bir kez çağırırsınız.
function bulkUpdate(rows) {
for (const r of rows) data.value.push(r) // cheap
triggerRef(data) // one update
}<code>markRaw</code>: Reaktiviteden Tamamen Çıkma
markRaw, bir nesneyi işaretleyerek Vue'nun onu, bir reactive veya normal bir ref içinde olsa bile asla reaktif hale getirmemesini sağlar. Vekil nesneye dönüştürülmemesi gereken üçüncü taraf sınıf örnekleri için kullanınız.
import { markRaw, reactive } from "vue"
const state = reactive({
map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy<code>markRaw</code> Neden Önemlidir
Karmaşık sınıf örneklerini (haritalar, editörler, web soketleri) reaktif bir vekil nesneyle sarmalamak, dahili referanslarını bozabilir veya fark edilmesi zor hatalara yol açabilir. markRaw, bu örnekleri değiştirmeden korurken onların reaktif state içinde yaşamaya devam etmesini sağlar.
Araçları Birleştirme
Bunlar birlikte kullanılabilir: bir markRaw örneğini tutan shallowRef, reaktif olarak değiştirebileceğiniz bir yuva ve Vue'nun hiçbir zaman vekil nesneye dönüştürmediği bir iç nesne sağlar — dış entegrasyonlar için idealdir.
const editor = shallowRef(null)
function init(el) {
editor.value = markRaw(new CodeEditor(el))
}Reaktivite Maliyeti ve Denetim
Ödünleşim şöyledir: derin reaktivite zahmetsizdir ancak daha ağırdır; sığ arayüzler ise güncellemeleri kendiniz tetiklemeniz karşılığında denetim ve performans sağlar. Bunlara yalnızca profil oluşturma işlemi bir gereksinim olduğunu gösterdiğinde başvurunuz.
Hızlı Kontrol
Gelişmiş reaktivite konusundaki anlayışınızı kontrol ediniz.
Özet
Gelişmiş reaktivite denetimlerini öğrendiniz:
shallowRefyalnızca.valueyeniden atamasına tepki verir, iç değişikliklere vermez — büyük veya dış kaynaklı veriler için uygundur.triggerRef, sığ bir referansın içeriğini değiştirdikten sonra güncellemeleri elle zorlar (önce toplu olarak değiştirin, sonra bir kez tetikleyin).markRaw, bir nesneyi reaktivitenin kalıcı olarak dışına çıkarır; üçüncü taraf sınıf örnekleri için idealdir.- Bunlar, güncellemeleri kendiniz tetiklemeniz karşılığında performans ve denetim sağlar.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“İleri Düzey Reaktivite: shallowRef ve triggerRef” dersi ücretsiz mi?
Evet — “İleri Düzey Reaktivite: shallowRef ve triggerRef” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“İleri Düzey Reaktivite: shallowRef ve triggerRef” dersinde ne öğreneceğim?
Performans için shallowRef, reaktivite dışında bırakmak için markRaw ve elle tetiklemek için triggerRef. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“İleri Düzey Reaktivite: shallowRef ve triggerRef” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İleri Düzey Reaktivite: shallowRef ve triggerRef
- Composable Fabrikaları ve Parametreli Composable'lar
- Vue'da XState ile Durum Makineleri
- Gruplandırılmış Etkiler için effectScope