VueJS - Interfaz reactiva

VueJS ofrece opciones para agregar reactividad a las propiedades, que se agregan de forma dinámica. Considere que ya hemos creado una instancia de vue y necesitamos agregar la propiedad watch. Se puede hacer de la siguiente manera:

Ejemplo

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

Hay un contador de propiedad definido como 1 en el objeto de datos. El contador se incrementa cuando hacemos clic en el botón.

La instancia de Vue ya está creada. Para agregarle reloj, debemos hacerlo de la siguiente manera:

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

Necesitamos usar $ watch para agregar reloj fuera de la instancia de vue. Se agrega una alerta, que muestra el cambio de valor de la propiedad del contador. También se agrega una función de temporizador, es decir, setTimeout, que establece el valor del contador en 20.

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

Siempre que se cambie el contador, la alerta del método de vigilancia se activará como se muestra en la siguiente captura de pantalla.

VueJS no puede detectar la adición y eliminación de propiedades. La mejor manera es declarar siempre las propiedades, que deben ser reactivas por adelantado en la instancia de Vue. En caso de que necesitemos agregar propiedades en tiempo de ejecución, podemos hacer uso de los métodos Vue global, Vue.set y Vue.delete.

Vue.set

Este método ayuda a establecer una propiedad en un objeto. Se utiliza para sortear la limitación de que Vue no puede detectar adiciones de propiedad.

Sintaxis

Vue.set( target, key, value )

Dónde,

objetivo: puede ser un objeto o una matriz

clave: puede ser una cadena o un número

valor: puede ser de cualquier tipo

Echemos un vistazo a un ejemplo.

Ejemplo

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

En el ejemplo anterior, hay una variable myproduct creada al principio usando el siguiente código.

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

Se le da al objeto de datos en la instancia de Vue de la siguiente manera:

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

Considere, queremos agregar una propiedad más a la matriz myproduct, después de que se crea la instancia de Vue. Se puede hacer de la siguiente manera:

vm.products.qty = "1";

Veamos la salida en la consola.

Como se vio anteriormente, en los productos se agrega la cantidad. Los métodos get / set, que básicamente agregan reactividad, están disponibles para la identificación, el nombre y el precio, y no están disponibles para la cantidad.

No podemos lograr la reactividad simplemente agregando un objeto vue. VueJS principalmente quiere que todas sus propiedades se creen al principio. Sin embargo, en caso de que necesitemos agregarlo más tarde, podemos usar Vue.set. Para esto, necesitamos configurarlo usando vue global, es decir, Vue.set.

Ejemplo

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

Hemos usado Vue.set para agregar la cantidad a la matriz usando el siguiente código.

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

Hemos consolado el objeto vue y lo siguiente es el resultado.

Ahora, podemos ver el get / set para qty agregado usando Vue.set.

Vue.delete

Esta función se utiliza para eliminar la propiedad de forma dinámica.

Ejemplo

Vue.delete( target, key )

Dónde,

objetivo: puede ser un objeto o una matriz

clave: puede ser una cadena o un número

Para eliminar cualquier propiedad, podemos usar Vue.delete como en el siguiente código.

Ejemplo

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

En el ejemplo anterior, hemos utilizado Vue.delete para eliminar el precio de la matriz utilizando el siguiente código.

Vue.delete(myproduct, 'price');

A continuación se muestra la salida que vemos en la consola.

Después de la eliminación, solo podemos ver la identificación y el nombre a medida que se elimina el precio. También podemos notar que los métodos get / set se eliminan.