VueJS - Реактивный интерфейс

VueJS предоставляет параметры для добавления реактивности к свойствам, которые добавляются динамически. Учтите, что мы уже создали экземпляр vue и нам нужно добавить свойство watch. Это можно сделать следующим образом -

пример

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

В объекте данных есть счетчик свойств, определенный как 1. Счетчик увеличивается, когда мы нажимаем кнопку.

Экземпляр Vue уже создан. Чтобы добавить к нему часы, нам нужно сделать это следующим образом:

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

Нам нужно использовать $ watch для добавления часов вне экземпляра vue. Добавлено предупреждение, которое показывает изменение значения свойства счетчика. Также добавлена ​​функция таймера, то есть setTimeout, которая устанавливает значение счетчика на 20.

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

Каждый раз, когда счетчик изменяется, срабатывает предупреждение от метода наблюдения, как показано на следующем снимке экрана.

VueJS не может обнаружить добавление и удаление свойств. Лучший способ - всегда объявлять свойства, которые должны быть активированы заранее в экземпляре Vue. Если нам нужно добавить свойства во время выполнения, мы можем использовать методы Vue global, Vue.set и Vue.delete.

Vue.set

Этот метод помогает установить свойство объекта. Он используется, чтобы обойти ограничение, заключающееся в том, что Vue не может обнаруживать добавления свойств.

Синтаксис

Vue.set( target, key, value )

Где,

цель: может быть объектом или массивом

ключ: может быть строкой или числом

значение: может быть любого типа

Давайте посмотрим на пример.

пример

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

В приведенном выше примере есть переменная myproduct, созданная в начале с использованием следующего фрагмента кода.

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

Он передается объекту данных в экземпляре Vue следующим образом:

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

Предположим, мы хотим добавить еще одно свойство в массив myproduct после создания экземпляра Vue. Это можно сделать следующим образом -

vm.products.qty = "1";

Посмотрим на вывод в консоли.

Как видно выше, в товарах добавлено количество. Методы get / set, которые в основном добавляют реактивность, доступны для идентификатора, имени и цены и недоступны для количества.

Мы не можем добиться реактивности, просто добавив объект vue. VueJS в основном хочет, чтобы все его свойства были созданы с самого начала. Однако, если нам нужно добавить его позже, мы можем использовать Vue.set. Для этого нам нужно установить его с помощью vue global, то есть Vue.set.

пример

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

Мы использовали Vue.set для добавления количества в массив, используя следующий фрагмент кода.

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

Мы утешили объект vue, и следующий результат.

Теперь мы можем увидеть, что get / set для qty добавлено с помощью Vue.set.

Vue.delete

Эта функция используется для динамического удаления свойства.

пример

Vue.delete( target, key )

Где,

цель: может быть объектом или массивом

ключ: может быть строкой или числом

Чтобы удалить любое свойство, мы можем использовать Vue.delete, как в следующем коде.

пример

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

В приведенном выше примере мы использовали Vue.delete для удаления цены из массива, используя следующий фрагмент кода.

Vue.delete(myproduct, 'price');

Ниже приведен вывод, который мы видим в консоли.

После удаления мы можем видеть только идентификатор и имя, так как цена удаляется. Мы также можем заметить, что методы get / set удалены.