e
sv

Vue'da izleyicileri anlama

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Vue, yeniden kullanılabilir ve bakımı yapılabilir bileşenleri hızla geliştirmenize, istemci tarafı veri bağlamayı kullanmanıza ve işlevselliğini geliştirmek için zengin bir eklenti ekosistemi sağlamanıza olanak tanıyan dinamik olarak genişletilebilir olacak şekilde tasarlanmıştır.

Vue'da bulunan birçok özellikten biri, bir uygulama durumunu izlememize ve bu değişikliklere dayalı eylemleri tetiklememize izin veren izleyici işlevidir. Bu makalede, Vue'da izleyicilerin nasıl çalıştığına, neler yapabileceklerine ve güçlü uygulamalar oluşturmak için bunları nasıl kullanacaklarına bakacağız.

gözcü nedir?

Vue'daki bir izleyici, bazı verileri gözlemlememize ve değiştiğinde belirli eylemleri gerçekleştirmemize izin veren özel bir özelliktir. Vue örneğindeki veri değişikliklerini gözlemlemenin ve bunlara tepki vermenin daha genel bir yoludur.

İzleyicilerle, sadece bir mülkü izleyip özel eylemler gerçekleştiremeyiz; ayrıca bu özelliğin değiştiği eski değere ve değiştirildiği yeni değere de erişebiliriz.

izleyicileri kullanma

Seçenekler API'sini kullanarak, aşağıda gösterildiği gibi bir özellik değerindeki değişiklikleri dinlemek için izleme seçeneğini kullanabiliriz:

 <script>
varsayılan dışa aktarma {
  veri() {
    dönüş {
      mesaj: "Merhaba Vue!",
    };
  },
  izlemek: {
    mesaj(yeniDeğer, eskiDeğer) {
      // newValue ve oldValue ile bir şeyler yapın.
    },
  },
};
</script>

Ek olarak, aynı şeyi Composition API'nin watch() işleviyle de gerçekleştirebiliriz:

 <komut dosyası kurulumu>
"vue"dan içe aktar { ref, izle };
const mesaj = ref("Merhaba Vue!");

watch(message, (newValue, oldValue) => {
  // newValue ve oldValue ile bir şeyler yapın.
});
</script>

Böylece message değeri her değiştiğinde, yeni değerine veya önceki değerine erişebilir ve tercih edilen herhangi bir işlemi gerçekleştirebiliriz.

Bir sonraki bölümde, gerçek dünya uygulamalarında gözlemcileri kullanmanın daha pratik örneklerine bakacağız. Ancak, oraya varmadan önce, bir izleyicinin kullanabileceği tüm seçenekleri gözden geçirelim.

Derin seçeneği ile deep izleme

Vue.js'deki izleyicilerin varsayılan davranışı sığdır; yani, yalnızca en üst düzeydeki verilerdeki değişiklikleri izlerler ve iç içe geçmiş özellik değişikliklerine tepki vermezler.

Örneğin, bir dizi nesnemiz var:

 <script>
varsayılan dışa aktarma {
  veri() {
    dönüş {
      birkaç veri: [
        {
          kimlik: 1,
          isim: "John",
        },
        {
          kimlik: 2,
          isim: "Jane",
        },
      ],
    };
  },
  izlemek: {
    someData(newValue, oldValue) {
      konsol.log("someData değişti!");
    },
  },
};
</script>

…ve yukarıda yaptığımız gibi bu veriler için bir izleyici kurun. Örneğin, someData[0].id rastgele bir sayıya ayarladığımızda olduğu gibi, bir nesnenin özelliği her değiştiğinde izleyicimiz tetiklenmeyecektir.

Bunu, izleyicimizde isteğe bağlı bir deep özelliği true olarak ayarlayarak düzeltebiliriz. Ancak bu, yeni bir işleyici işlevi tanıtmamız gerekeceğinden, izleyicimizin oluşturulduğu sözdizimini biraz değiştirecektir:

 // . . .
izlemek: {
  birkaç veri: {
    işleyici(newValue, oldValue) {
      // console.log(yeniDeğer, eskiDeğer);
      konsol.log("someData değişti!");
    },
    derin: doğru,
  },
},

Ve bu yeni ekleme ile, iç içe geçmiş bir özellik değişse bile izleyicimiz tetiklenecek.

Bu örnek, aşağıdaki gibi Vue 3 Composition API'deki watch() işleviyle de çoğaltılabilir:

 <komut dosyası kurulumu>
"vue"dan içe aktar { ref, izle };

const someData = başvuru([
  {
    kimlik: 1,
    isim: "John",
  },
  {
    kimlik: 2,
    isim: "Jane",
  },
]);

watch(someData, (newValue, oldValue) => {
    konsol.log("someData değişti!");
  },
  {
    derin: doğru,
  }
);
</script>

immediate seçenek

İzlediğiniz değer değişmediği sürece izleyiciler hemen etkinleştirilmez. Ancak bazı durumlarda, izlediğimiz mülkün başlangıç değeri ile belirli işlemler yapmak isteyebiliriz. Örneğin, uygulamamız ilk verilerle bir API isteği göndermemizi ve ardından veriler değişirse işlemi tekrarlamamızı gerektirebilir.

Önceki örnekte yaptığımız gibi işleyici işlevini kullanarak bir izleyiciyi hemen çalıştırmaya zorlayabiliriz ve ayrıca immediate seçeneğini true olarak ayarlayabiliriz:

 <script>
varsayılan dışa aktarma {
  veri() {
    dönüş {
      mesaj: "Merhaba Vue.js!",
    };
  },
  izlemek: {
    İleti: {
      işleyici(val) {
        konsol.log(val);
      },
      hemen: doğru,
    },
  },
};
</script>

Bunu yaparak, uygulamamız başlatılır başlatılmaz izleyicimizin belirli bir eylemde bulunmasını sağlayabilir ve gelecekte izlediğimiz mülk değiştiğinde bunu yapmaya devam edebiliriz.

Vue 3 ile, aşağıda gösterildiği gibi, isteğe bağlı bir nesneye immediate seçenek de eklenebilir:

 <komut dosyası kurulumu>
"vue"dan içe aktar { ref, izle };
const mesaj = ref("Merhaba Vue!");

izlemek(
  İleti,
  (yeniDeğer) => {
    konsol.log(newValue);
  },
  {
    hemen: doğru,
  }
);
</script>

Ayrıca, Composition API, doğrudan seçeneği true olarak ayarlanmış watch() 'a oldukça benzeyen yeni bir watchEffect() yöntemini sunar. Bununla birlikte, watch işlevi/seçeneği yalnızca açıkça izlenen kaynağı takip ederken, watchEffect() yürütmesi boyunca erişilen her reaktif özelliği otomatik olarak izleyecektir:

 <komut dosyası kurulumu>
"vue"dan içe aktar {ref, watchEffect };
const foo = ref("Merhaba dünya!");
const bar = ref("Tekrar merhaba!");

watchEffect(() => {
  konsol.log(foo.değer);
  konsol.log(bar.değer);
});
</script>

Bu şekilde, foo ve bar ilk değeri konsola kaydedilir ve değerleri değiştiğinde kaydedilmeye devam eder.

Eylemdeki izleyicilerin örnek senaryoları

Gerçek hayattaki bir uygulamada izleyicilerin nasıl çalıştığını daha iyi anlamak için bazı pratik örnekleri gözden geçirelim.

Yazma durumunu izle

İzleyicilerle basit ve sezgisel bir deney, yazma durumunu izleyen ve kullanıcı yazarken belirli eylemleri gerçekleştiren bir uygulamadır:

 <şablon>
  <div>
    <input type="text" v-model="message" />
    <p v-if="typing">Yazılıyor...</p>
  </div>
</şablon>

<komut dosyası kurulumu>
"vue"dan içe aktar { ref, izle };

const mesajı = ref("");
const yazarak = ref(yanlış);

izle(mesaj, (değer) => {
  yazarak.değer = doğru;
  setTimeout(() => {
    yazarak.değer = yanlış;
  }, 2000);
});
</script>

Bu örnekte olduğu gibi iki reaktif durum oluşturduk ( message ve typing ). Daha sonra message bir giriş öğesine bağlarız ve ayrıca onun için bir izleyici yaratırız, böylece her değiştiğinde, typing değerini false true ayarlarız ve 2 saniye sonra otomatik olarak tekrar false olarak ayarlarız.

Bu örneği tarayıcıda çalıştırdığımızda aşağıdaki sonucu alacağız:

Selam Dünya

Bu örnek basit olsa da, Google gibi arama motorlarının siz yazarken arama önerileri sağlamasına benzer şekilde, uzak bir API'ye bir istek göndererek ve işaretlemenizi bu istekten gelen yanıta göre güncelleyerek bir adım daha ileri götürebilirsiniz.

Gerçek zamanlı dönüştürücü

Başka bir etkileşimli örnek, çıktının farklı girdi noktalarına göre etkilenip hesaplanabileceği basit bir dönüştürücü uygulamasıdır.

Aşağıdaki kodda olduğu gibi, Fahrenheit değerinin bir Celsius değeri girilerek hesaplanabileceği bir sıcaklık dönüştürücü oluşturduk ve bunun tersi de geçerlidir:

 <şablon>
  <div class="merkezli">
    <div>
      <label for="celsius">Santigrat derece</label>
      <input type="text" v-model="tempCelsius" id="celsius" />
    </div>
    <p style="font-size: 30px; margin: 0; font-weight: 600">=</p>
    <div>
      <label for="fahrenheit">Fahrenhayt cinsinden derece</label>
      <input type="text" v-model="tempFahrenheit" id="fahrenheit" />
    </div>
  </div>
</şablon>

<komut dosyası kurulumu>
"vue"dan içe aktar { ref, izle };

const tempCelsius = ref(boş);
const tempFahrenhayt = başvuru(boş);

watch(tempCelsius, (newValue) => {
  tempFahrenheit.value = Math.round((newValue * 9) / 5 + 32);
});

watch(tempFahrenheit, (newValue) => {
  tempCelsius.value = Math.round(((newValue - 32) * 5) / 9);
});
</script>

Bunu çalıştırmak da bize aşağıdaki çıktıyı verir:

Sıcaklık Dönüştürücü

Basit geri sayım sayacı

watchEffect() işlevini çalışırken görmek için, aşağıda basit bir geri sayım sayacı uygulaması oluşturduk, bu uygulamamız yüklendikten 10 saniye sonra saymaya başlayacak ve zamanlayıcı 5 saniyeye ulaştığında sona erecek:

 <şablon>
  <div class="merkezli">
    <h1>{{ sayaç }}</h1>
  </div>
</şablon>

<komut dosyası kurulumu>
"vue"dan içe aktar {ref, watchEffect };
const sayaç = ref(10);

watchEffect(() => {
  if (sayaç.değer > 5) {
    setTimeout(() => {
      sayaç.değer--;
    }, 1000);
  }
});
</script>

Bunun arkasındaki mantık oldukça basittir. 10 değerinde bir reaktif counter özelliği oluşturmuştuk. Ardından sayacımızı her saniye sürekli olarak 1 azaltacak ve değeri 5 olduğunda duracak bir watchEffect() oluşturduk.

Bir izleyiciyi durdurmak

Ana bileşenin bağlantısı kaldırıldığında, izleyiciler otomatik olarak durur ve çoğu durumda bir izleyiciyi manuel olarak sonlandırmanız gerekmez. Ancak, belki bir koşul yerine getirildiğinde bir izleyiciyi durdurmak isteyeceğiniz senaryolar vardır ve bunu yapmak oldukça basittir.

Composition API ile, aşağıda görüldüğü gibi izleyicimizi yalnızca özel bir değişkene atamamız ve ardından izleyiciyi durdurmak için bu değişkeni çağırmamız gerekecek:

 const unwatch = izle(foo, (değer) => {
  // ...
});

// izleyiciyi durdur
izlemeyi kaldır();

Aynı şey watchEffect() ile de çalışır. Ancak, Seçenekler API'si ile bir izleyiciyi, izleyici seçeneği aracılığıyla değil de this.$watch() yöntemiyle oluşturulmuşsa program aracılığıyla durdurabiliriz:

 <script>
varsayılan dışa aktarma {
  veri() {
    dönüş {
      foo: boş,
    };
  },
  oluşturulan() {
    const unwatch = this.$watch("foo", (değer) => {
      konsol.log(değer);
    });

    setTimeout(() => {
      izlemeyi kaldır();
    }, 5000);
  },
};
</script>

Bu örnekte, uygulamamızın oluşturduğu kancada yeni bir izleyici kurduk ve 5 saniye sonra izleyiciyi durdurduk.

Hesaplanan özellikler ve izleyiciler karşılaştırması

Hesaplanan özelliklerin ne zaman kullanılacağı ve izleyicilerin ne zaman kullanılacağı konusunda çok fazla belirsizlik var. Bununla birlikte, bu bölüm durumu açıklığa kavuşturabilir.

Hesaplanan özellikler , diğer bazı koşullara dayalı olarak bir mülkün değerini hesaplamak için kullanılır. Diğer yandan, gözlemciler öncelikli olarak bir mülkün değerini değiştirmek için kullanılmazlar; bunun yerine, değer değiştiğinde sizi bilgilendirmek ve bu değişikliklere dayalı olarak belirli eylemleri gerçekleştirmenize izin vermek için kullanılırlar.

Hesaplanan özellikler, bir nesnenin mevcut değerini almanız ve ona dayalı bir şey hesaplamak gibi mantığınızda kullanmanız gerektiğinde kullanılmalıdır. Ve bir veya daha fazla değerin ne zaman değiştiğini bilmeniz ve buna göre tepki vermeniz gerektiğinde izleyiciler kullanılmalıdır.

Çözüm

İzleyiciler, Vue'da güçlü bir özelliktir. Sistemdeki değişikliklere anında ve dinamik olarak tepki vermemizi sağlarlar.

Bir öğeye bir izleyici eklenirse, her değiştiğinde bu değişiklik üzerinde hareket edebiliriz. Bu uç bir durum gibi görünse de, değişikliklere tepki verebilmenin nasıl faydalı olabileceğinin güzel bir örneğidir. Ve bu yazıda, izleyicilerin nasıl kullanılacağını ve mevcut seçeneklerini ayrıntılı olarak inceleyebildik. Ek olarak, gerçek dünya uygulamalarında izleyicilerin nasıl kullanılacağına dair çeşitli pratik örneklere baktık.

Vue'daki izleyicileri anlama yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Vue'da izleyicileri anlama