VueJS - Reaktif Arayüz

VueJS, dinamik olarak eklenen özelliklere reaktivite eklemek için seçenekler sunar. Zaten vue örneğini oluşturduğumuzu ve watch özelliğini eklememiz gerektiğini düşünün. Aşağıdaki gibi yapılabilir -

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

Veri nesnesinde 1 olarak tanımlanan bir özellik sayacı var. Düğmeye tıkladığımızda sayaç artar.

Vue örneği zaten oluşturulmuş. Ona saat eklemek için bunu şu şekilde yapmamız gerekiyor -

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

Vue örneğinin dışına saat eklemek için $ watch kullanmamız gerekiyor. Counter özelliği için değer değişikliğini gösteren bir uyarı eklendi. Sayaç değerini 20'ye ayarlayan setTimeout gibi bir zamanlayıcı işlevi de eklenmiştir.

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

Sayaç her değiştirildiğinde, izleme yönteminden gelen uyarı aşağıdaki ekran görüntüsünde gösterildiği gibi tetiklenecektir.

VueJS, özellik eklemeyi ve silmeyi algılayamaz. En iyi yol, her zaman Vue örneğinde reaktif olması gereken özellikleri bildirmektir. Çalışma zamanında özellikler eklememiz gerektiğinde, Vue global, Vue.set ve Vue.delete yöntemlerini kullanabiliriz.

Vue.set

Bu yöntem, bir nesne üzerinde bir özellik ayarlamaya yardımcı olur. Vue'nun özellik eklemelerini tespit edemediği sınırlamasını aşmak için kullanılır.

Sözdizimi

Vue.set( target, key, value )

Nerede,

hedef: Bir nesne veya dizi olabilir

anahtar: Bir dizi veya sayı olabilir

değer: Herhangi bir tür olabilir

Bir örneğe bakalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, aşağıdaki kod parçası kullanılarak başlangıçta oluşturulan bir değişken myproduct vardır.

var myproduct = {"id":1, name:"book", "price":"20.00"};

Vue örneğindeki veri nesnesine aşağıdaki gibi verilir -

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

Vue örneği oluşturulduktan sonra myproduct dizisine bir özellik daha eklemek istiyoruz. Aşağıdaki gibi yapılabilir -

vm.products.qty = "1";

Çıktıyı konsolda görelim.

Yukarıda görüldüğü gibi ürünlerde miktar eklenir. Temel olarak reaktivite ekleyen get / set yöntemleri id, isim ve fiyat için mevcuttur ve qty için mevcut değildir.

Sadece vue nesnesi ekleyerek reaktiviteye ulaşamayız. VueJS çoğunlukla tüm özelliklerinin başlangıçta oluşturulmasını ister. Ancak daha sonra eklememiz gerekirse Vue.set'i kullanabiliriz. Bunun için vue global yani Vue.set kullanarak ayarlamamız gerekiyor.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Aşağıdaki kod parçasını kullanarak qty'yi diziye eklemek için Vue.set'i kullandık.

Vue.set(myproduct, 'qty', 1);

Vue nesnesini teselli ettik ve aşağıdaki çıktı.

Şimdi, Vue.set kullanılarak eklenen qty için get / set'i görebiliriz.

Vue.delete

Bu işlev özelliği dinamik olarak silmek için kullanılır.

Misal

Vue.delete( target, key )

Nerede,

hedef: Bir nesne veya dizi olabilir

anahtar: Bir dize veya sayı olabilir

Herhangi bir özelliği silmek için aşağıdaki kodda olduğu gibi Vue.delete kullanabiliriz.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, aşağıdaki kod parçasını kullanarak fiyatı diziden silmek için Vue.delete'yi kullandık.

Vue.delete(myproduct, 'price');

Aşağıdaki çıktı, konsolda görüyoruz.

Silme işleminden sonra fiyat silindiği için sadece id ve adı görebiliriz. Ayrıca get / set yöntemlerinin silindiğini de fark edebiliriz.