Değişiklikleri izlemek ve davranışı daha sezgisel bir şekilde uygulamak için gözlemcileri kullanın.
Temel Çıkarımlar
- Vue gibi JavaScript çerçeveleri, web uygulaması geliştirmeyi basitleştirmek için bileşen mimarisi, durum yönetimi ve yönlendirme gibi özellikler sunar.
- Vue izleyicileri, reaktif özelliklerdeki değişiklikleri izleyen ve olaylara ve veri değişikliklerine tepki vermenize olanak tanıyan işlevlerdir.
- İzleyicileri hesaplanan özelliklerle karşılaştırdığımızda, hesaplanan özellikler daha kısa ve okunması daha kolay olduğundan daha iyi performans ve hata ayıklama sağlanır.
JavaScript çerçeveleri web geliştirmenin hayati bir parçası haline geldi. Bunun nedeni bileşen mimarisi, durum yönetimi ve yönlendirme gibi kolayca erişilebilen özellikleridir. Bunlar sıfırdan bir web uygulaması oluşturmak için gereken stresi, çabayı ve zamanı azaltmaya yardımcı olur.
Bu çerçevelerden biri olan Vue, geliştirmeyi hızlandıracak birçok özellik sunuyor. İzleme özelliği, programın yürütülmesi sırasında değişkenlerin ve ifadelerin değerlerini izlemenizi sağlar.
Vue'da İzleyiciler Nedir?
Vue izleyicileri, reaktif bir özellikteki değişiklikleri izleyen ve buna göre yanıt veren işlevlerdir. İzleyiciler olaylara ve veri değişikliklerine tepki vermenizi sağlar.
Bir izleyiciyi kullanmak için içe aktarın kol saati işlevi görüntü betiğinizdeki paket:
<scriptsetup>
import { watch } from 'vue';
script>
Artık Vue bileşeninize bir izleyici uygulamak için izleme işlevini kullanabilirsiniz. İşte basit bir örnek:
<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template><scriptsetup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>
Bu basit bileşen, kullanıcının adındaki değişikliği izlemek için izleme işlevini kullanır. Parçacığın şablon bölümü, bileşenin HTML yapısını tanımlar; P Kullanıcının reaktif değişkeninin değerini görüntüleyen etiket.
Şablon ayrıca bir düğme öğesi içerir. ismini değiştir işlev bir tıklama olayı dinleyicisine bağlı. Kullanıcı değişkeni değiştiğinde Vue, geri çağırma işlevini tetikler. Geri arama işlevi bir uyarı görüntüler: "Kullanıcı adı "Chinedu"dan "Victor"a değiştirildi."
İzleyicileri Hesaplanan Özelliklerle Karşılaştırma
İzleyiciler ve hesaplanan özellikler arasındaki farkı anlamak önemlidir. Her ikisi de Vue'da reaktivite araçları olarak kullanılsa da bunları farklı amaçlarla kullanmalısınız.
Örneğin, bir baba ve oğlunun yaşlarının toplamını gözlemcilerle şu şekilde hesaplayabilirsiniz:
<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template><scriptsetup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})
script>
Bu Vue bileşeni, baba ve oğlunun yaşlarının toplamını almak için gözlemcileri kullanır. Bunu yapmak için yeni bir reaktif değişken oluşturur, Toplam. Bir oluşturabilirsiniz Vue'nun Kompozisyon API'sini kullandığınızda reaktif değişken.
Snippet daha sonra iki tane kullanır kol saati oğlunun ve babasının yaşlarını izleme işlevi görür. Baba ya da oğul her yaş için pasaj, yeni değeri diğerinin yaşıyla özetler. Daha sonra sonucu dosyaya kaydeder. Toplam reaktif değişken.
Yukarıdaki kod parçasında hesaplanan özellikleri kullanan senaryonun aynısını düşünün:
<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template><scriptsetup>
import { ref, computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});
script>
Bu pasaj, öncekine kıyasla daha kısa ve okunması daha kolaydır. Parçacık, baba ve oğlunun yaşlarının toplamını alır ve bunu hesaplanmış bir ref'e (değişken) kaydeder. Toplam. Şablon bölümü daha sonra toplam değişkeni kullanarak görüntüler. enterpolasyon, Vue'da bir veri bağlama tekniği.
İki çağın toplamını gözlemcilerle elde edebilseniz bile, bunu hesaplanan özelliklerle yapmak daha iyidir. Bu durumda izleyicileri kullanmak, daha fazla kod gerektirdiğinden daha yavaş yükleme sürelerine ve daha zor hata ayıklamaya yol açabilir.
Hesaplanan özelliklerin yerine izleyicileri kullanmayın. Mevcut reaktif verilerden yeni veriler türetmek istediğinizde veri değişikliklerini izlemek ve bunlara tepki vermek için izleyicileri ve hesaplanan özellikleri kullanın.
acil seçeneği, izleyici oluştururken kullanabileceğiniz bir yapılandırmadır. Bu seçenek, izleyicinin, Vue bileşeni monte ettikten hemen sonra geri aramayı tetikleyip tetiklemeyeceğini belirler.
Burada, anında seçeneği olan bir izleyici kullanan bir bileşenin örneği verilmiştir:
<scriptsetup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
},
{ immediate: true }
);
script>
Yukarıdaki kod parçasında, izleyici, bileşen başlatıldıktan hemen sonra geri çağrısını gerçekleştirecek ve "Sayımın tanımsızdan 10'a değiştirildiğini" konsola kaydedecektir. Bu, Vue'nun count ref'e 10 değerini enjekte etmesinden önce başlangıç değişkeninin tanımsız olduğunu gösterir.
Anında seçeneği, izlenen özelliğin mevcut değerine dayalı olarak bir başlangıç eylemi veya başlatma gerçekleştirmek istediğiniz senaryolarda kullanışlı olabilir. Örneğin, Vue bir bileşeni bağladıktan sonra uygulamanızın bir API'den veri almasına ihtiyaç duyduğunuzda.
Vue Watchers'ta Mevcut Derin Seçenek
derin Vue'da gözlemcilerle çalışırken kullanılabilen seçenek, iç içe geçmiş nesneler veya diziler içindeki değişikliklerin derinlemesine gözlemlenmesine olanak tanır. olarak ayarlandığında doğru, izleyici iç içe geçmiş özellikler içindeki değişiklikleri algılayabilir.
Aşağıda, derin seçeneğe sahip bir Vue bileşeni örneği verilmiştir:
<scriptsetup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
},
{ deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>
Yukarıdaki kod parçası şunu başlatır: veri içeren bir nesneyle ref uzunluk mülk. Parçacık, derin seçeneği şu şekilde ayarlar: doğru. Daha sonra, uzunluk özelliğinin şu şekilde değişmesinden bu yana verilerin değiştiğini konsola kaydeder. 43.
Deep seçeneği true olarak ayarlanmadığında izleme işlevi nesnede herhangi bir değişiklik fark etmeyecektir. Ancak, veri değişkenini reaktif bir nesne olarak başlattığınızda Vue, deep seçeneği olmadan tüm iç içe geçmiş ve derin değişiklikleri izler:
<scriptsetup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
}
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>
Yukarıdaki kod parçasındaki izleme işlevi, veri değişkeninin reaktif bir nesne olması nedeniyle verilerin değiştiğini konsola kaydedecektir.
Vue Watchers ile Daha İyi Uygulamalar Oluşturun
Vue'nun izleyicileri uygulamalarınızda hassas reaktivite elde etmenize yardımcı olabilir. Veri özelliklerindeki değişiklikleri nasıl gözlemleyebileceğinizi ve yanıt olarak özel mantığı nasıl çalıştırabileceğinizi kontrol ederler.
İzleyicilerin ne zaman kullanılacağını, bunların hesaplanan özelliklerden farklarını ve anında ve derin gibi seçenekleri anlamak, çok duyarlı Vue uygulamaları oluşturma yeteneğinizi önemli ölçüde geliştirebilir.
