Tepkisel API İleri Düzey
shallowRef()
ref() fonksiyonunun sığ versiyonu.
Tip
function shallowRef<T>(value: T): ShallowRef<T>
interface ShallowRef<T> {
value: T
}Açıklama
ref()'den farklı olarak, bir shallow ref'in iç değeri olduğu gibi saklanır ve gösterilir, derinlemesine reaktif hale getirilmeyecektir. Sadece.valueerişimi reaktiftir.shallowRef()genellikle büyük veri yapılarının performans optimizasyonları veya harici durum yönetim sistemleriyle entegrasyon için kullanılır.Örnek
const state = shallowRef({ count: 1 })
// değişimi tetiklemiyor
state.value.count = 2
// değişimi tetikliyor
state.value = { count: 2 }Ayrıca bakınız
Rehber - Büyük Değiştirilemez Yapılar için Reaktivite Yükünü AzaltmaRehber - Harici Ortam Sistemleriyle Entegrasyon
triggerRef()
Bir shallow ref üzerinde etkileri tetikler. Genellikle bir shallow ref'in iç değerinde derin mutasyonlar yapıldıktan sonra kullanılır.
Tip
function triggerRef(ref: ShallowRef): voidÖrnek
const shallow = shallowRef({
greet: 'Merhaba, dünya'
})
// İlk geçişte "Merhaba, dünya" bir kez loglanır
watchEffect(() => {
console.log(shallow.value.greet)
})
// Bu etkiyi tetiklemez çünkü ref sığdır
shallow.value.greet = 'Merhaba, evren'
// "Merhaba, evren" loglanır
triggerRef(shallow)
customRef()
Hassas kontrol ile bağımlılık takibi ve güncellemeleri tetiklemeyi sağlayan özelleştirilmiş bir ref oluşturur.
Tip
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
type CustomRefFactory<T> = (
track: () => void,
trigger: () => void
) => {
get: () => T
set: (value: T) => void
}Açıklama
customRef()bir fabrika fonksiyonu bekler, bu fonksiyontrackvetriggerfonksiyonlarını argüman olarak alır vegetvesetmetotlarıyla bir obje döndürmelidir.Genel olarak,
track()get()içinde çağrılır vetrigger()set()içinde çağrılır. Ancak, ne zaman çağrıldıkları veya hiç çağrılmayacakları üzerinde tam kontrole sahipsinizdir.Örnek
En son set çağrısından sonra belirli bir zaman aşımından sonra yalnızca değerleri güncelleyen bir debounced ref oluşturma:
import { customRef } from 'vue'
export function useDebouncedRef(value, delay = 200) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger()
}, delay)
}
}
})
}Bileşendeki kullanım:
<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('merhaba')
</script>
<template>
<input v-model="text" />
</template>Dikkatli KullanımcustomRef kullanırken, özellikle getter her çalıştığında yeni nesne veri türleri oluşturmaktan kaçınmalıyız. Bu, bir üst ve alt bileşen arasındaki ilişkiyi etkiler ve böyle bir customRef'in bir prop olarak geçildiği durumlarda sorun yaratabilir.
Üst bileşenin render fonksiyonu, farklı bir reaktif durumdaki değişikliklerle tetiklenebilir. Yeniden render sırasında, customRef'imiz yeniden değerlendiriliyor, bir alt bileşene prop olarak yeni bir nesne veri türü döndürülüyor. Bu prop, alt bileşendeki son değeriyle karşılaştırılıyor ve farklı oldukları için, alt bileşendeki customRef'in reaktif bağımlılıkları tetikleniyor. Bu arada, üst bileşendeki reaktif bağımlılıklar çalışmıyor, çünkü customRef'in setter'ı çağrılmadı ve bağımlılıkları tetiklenmedi.
shallowReactive()
reactive() fonksiyonunun sığ versiyonu.
Tip
function shallowReactive<T extends object>(target: T): TAçıklama
reactive()'den farklı olarak, derin bir dönüşüm yoktur: yalnızca kök düzeyindeki özellikler sığ reaktif bir nesne için reaktiftir. Özellik değerleri olduğu gibi saklanır ve gösterilir - bu ayrıca ref değerlerine sahip özelliklerin otomatik olarak açılmayacağı anlamına gelir.Dikkatli KullanımSığ veri yapıları yalnızca bir bileşenin kök düzeyinde durum için kullanılmalıdır. Bunu derin reaktif bir nesne içine yerleştirmekten kaçının, çünkü bu, anlaşılması ve hata ayıklaması zor olan tutarsız reaktivite davranışına sahip bir ağaç oluşturabilir.
Örnek
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// durumun kendi özelliklerini değiştirmek reaktiftir
state.foo++
// ...ancak iç içe nesneleri dönüştürmez
isReactive(state.nested) // false
// REAKTİF DEĞİL
state.nested.bar++
shallowReadonly()
readonly() fonksiyonunun sığ versiyonu.
Tip
function shallowReadonly<T extends object>(target: T): Readonly<T>Açıklama
readonly()'den farklı olarak, derin bir dönüşüm yoktur: yalnızca kök düzeyindeki özellikler salt okunur hale gelir. Özellik değerleri olduğu gibi saklanır ve gösterilir - bu ayrıca ref değerlerine sahip özelliklerin otomatik olarak açılmayacağı anlamına gelir.Dikkatli KullanımSığ veri yapıları yalnızca bir bileşenin kök düzeyinde durum için kullanılmalıdır. Bunu derin reaktif bir nesne içine yerleştirmekten kaçının, çünkü bu, anlaşılması ve hata ayıklaması zor olan tutarsız reaktivite davranışına sahip bir ağaç oluşturabilir.
Örnek
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// durumun kendi özelliklerini değiştirmek başarısız olur
state.foo++
// ...ancak iç içe nesneler üzerinde çalışır
isReadonly(state.nested) // false
// çalışır
state.nested.bar++
toRaw()
Vue tarafından oluşturulan bir proxy'nin ham, orijinal nesnesini döndürür.
Tip
function toRaw<T>(proxy: T): TAçıklama
toRaw()reactive(),readonly(),shallowReactive()veyashallowReadonly()tarafından oluşturulan proxy'lerden orijinal nesneyi döndürebilir.Bu, proxy erişim / takip yükü almadan geçici olarak okuma yapmak veya değişiklik tetiklememek için kullanılabilecek bir kaçış yoludur. Orijinal nesneye kalıcı bir referans tutulması tavsiye edilmez. Dikkatli kullanın.
Örnek
const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true
markRaw()
Bir nesneyi belirler, böylece hiçbir zaman bir proxy'ye dönüştürülmez. Nesneyi kendisini döndürür.
Tip
function markRaw<T extends object>(value: T): TÖrnek
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// ayrıca diğer reaktif nesnelerin içinde iç içe olduğunda çalışır
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // falseDikkatli KullanımmarkRaw()veshallowReactive()gibi sığ API'lar, varsayılan derin reaktif / salt okunur dönüşümden seçici olarak feragat etmenizi sağlar ve durumu grafiğinizde ham, proxy'siz nesneleri yerleştirmenizi sağlar. Çeşitli nedenlerle kullanılabilirler:Bazı değerlerin reaktif hale getirilmemesi gerekir, örneğin karmaşık bir 3. parti sınıf örneği veya bir Vue bileşen nesnesi.
Proxy dönüşümünü atlamak, sabit veri kaynaklarıyla büyük listeleri işlerken performans iyileştirmeleri sağlayabilir.
Bunlar gelişmiş olarak kabul edilir çünkü ham feragat yalnızca kök düzeyinde, bu nedenle bir iç içe geçmiş, işaretlenmemiş ham nesneyi reaktif bir nesneye yerleştirirseniz ve ardından tekrar erişirseniz, proxy sürümünü geri alırsınız. Bu, kimlik tehlikeleri oluşturabilir - yani, nesne kimliğine dayanan bir işlem yaparken ama hem ham hem de proxy sürümünü kullanmak:
const foo = markRaw({
nested: {}
})
const bar = reactive({
// `foo` ham olarak işaretlenmiş olsa da, foo.nested değildir.
nested: foo.nested
})
console.log(foo.nested === bar.nested) // falseKimlik tehlikeleri genel olarak nadirdir. Ancak, bu API'leri kullanırken kimlik tehlikelerinden güvenli bir şekilde kaçınmak için reaktivite sisteminin nasıl çalıştığına dair sağlam bir anlayışa sahip olmanız gerekir.
effectScope()
Reaktif etkileri (yani, hesaplanmış ve izleyiciler) toplamak için bir etki kapsamı nesnesi oluşturur, böylece bu etkiler birlikte atılabilir. Bu API'nin detaylı kullanım durumları için ilgili RFC'ye başvurun.
Tip
function effectScope(detached?: boolean): EffectScope
interface EffectScope {
run<T>(fn: () => T): T | undefined // kapsam aktif değilse undefined
stop(): void
}Örnek
const scope = effectScope()
scope.run(() => {
const doubled = computed(() => counter.value * 2)
watch(doubled, () => console.log(doubled.value))
watchEffect(() => console.log('Sayı: ', doubled.value))
})
// kapsam içindeki tüm etkileri kaldırmak için
scope.stop()
getCurrentScope()
Varsa, mevcut aktif etki kapsamı'nı döndürür.
Tip
function getCurrentScope(): EffectScope | undefined
onScopeDispose()
Mevcut aktif etki kapsamı üzerine bir atılma geri çağırma kaydı oluşturur. Bu geri çağırma, ilişkili etki kapsamı durdurulduğunda çağrılacaktır.
Bu yöntem, her Vue bileşeninin setup() fonksiyonu da bir etki kapsamı içinde çağrıldığı için tekrar kullanılabilir kompozisyon fonksiyonlarında onUnmounted yerine bileşen bağlantılı olmayan bir alternatif olarak kullanılabilir.
Bu fonksiyon aktif bir etki kapsamı olmadan çağrılırsa bir uyarı verilecektir. 3.5+ sürümünde bu uyarı, ikinci argüman olarak true verilerek bastırılabilir.
Tip
function onScopeDispose(fn: () => void, failSilently?: boolean): void