VueJS - interfejs reaktywny

VueJS zapewnia opcje dodawania reaktywności do właściwości, które są dodawane dynamicznie. Weź pod uwagę, że utworzyliśmy już instancję vue i musimy dodać właściwość watch. Można to zrobić w następujący sposób -

Przykład

<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>

Istnieje licznik właściwości zdefiniowany jako 1 w obiekcie danych. Licznik jest zwiększany, gdy klikamy przycisk.

Instancja Vue została już utworzona. Aby dodać do niego zegarek, musimy zrobić to w następujący sposób -

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

Musimy użyć $ watch, aby dodać watch poza instancją vue. Dodano alert, który pokazuje zmianę wartości właściwości licznika. Dodano również funkcję timera setTimeout, która ustawia wartość licznika na 20.

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

Za każdym razem, gdy licznik zostanie zmieniony, alert z metody zegarka zostanie uruchomiony, jak pokazano na poniższym zrzucie ekranu.

VueJS nie może wykryć dodawania i usuwania właściwości. Najlepszym sposobem jest zawsze deklarowanie właściwości, które muszą być reaktywne z góry w instancji Vue. W przypadku, gdy musimy dodać właściwości w czasie wykonywania, możemy skorzystać z metod globalnych Vue, Vue.set i Vue.delete.

Vue.set

Ta metoda pomaga ustawić właściwość obiektu. Służy do obejścia ograniczenia polegającego na tym, że Vue nie może wykryć dodatkowych właściwości.

Składnia

Vue.set( target, key, value )

Gdzie,

cel: może być obiektem lub tablicą

klucz: może być ciągiem lub liczbą

wartość: może być dowolnego typu

Spójrzmy na przykład.

Przykład

<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>

W powyższym przykładzie istnieje zmienna myproduct utworzona na początku przy użyciu następującego fragmentu kodu.

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

Jest on nadawany obiektowi danych w instancji Vue w następujący sposób -

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

Rozważmy, że po utworzeniu instancji Vue chcemy dodać jeszcze jedną właściwość do tablicy myproduct. Można to zrobić w następujący sposób -

vm.products.qty = "1";

Zobaczmy wynik w konsoli.

Jak widać powyżej, w produktach ilość jest dodawana. Metody get / set, które zasadniczo dodają reaktywność, są dostępne dla identyfikatora, nazwy i ceny i nie są dostępne dla ilości.

Nie możemy osiągnąć reaktywności po prostu dodając obiekt vue. VueJS przede wszystkim chce, aby wszystkie jego właściwości były tworzone na początku. Jednak w przypadku konieczności dodania go później, możemy użyć Vue.set. W tym celu musimy ustawić go za pomocą vue global, czyli Vue.set.

Przykład

<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>

Użyliśmy Vue.set, aby dodać ilość do tablicy, używając następującego fragmentu kodu.

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

Pocieszyliśmy obiekt vue i oto wynik.

Teraz możemy zobaczyć get / set dla ilości dodanej za pomocą Vue.set.

Vue.delete

Ta funkcja służy do dynamicznego usuwania właściwości.

Przykład

Vue.delete( target, key )

Gdzie,

cel: może być obiektem lub tablicą

klucz: może być łańcuchem lub liczbą

Aby usunąć dowolną właściwość, możemy użyć Vue.delete jak w poniższym kodzie.

Przykład

<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>

W powyższym przykładzie użyliśmy Vue.delete do usunięcia ceny z tablicy przy użyciu następującego fragmentu kodu.

Vue.delete(myproduct, 'price');

Poniżej przedstawiono dane wyjściowe, które widzimy w konsoli.

Po usunięciu widzimy tylko identyfikator i nazwę, ponieważ cena jest usuwana. Możemy również zauważyć, że metody get / set są usuwane.