Propiedades reactivas y computadas en vuejs

Muchas de las aplicaciones web que se utilizan actualmente hacen posible que cuando un usuario interactúa con algunas de sus funcionalidades, les devuelvan un resultado inmediato o dinámico y eso suele ser muy cómodo y agradable para cualquiera, y ese es precisamente uno de los enfoques principales sobre los que se puede trabajar en VueJS . Ahora bien, resulta que abunda una gran cantidad de literatura en inglés sobre el tema que explican esto, pero quizás para ti el que estás leyendo, resulte tedioso el tratar de entenderlo en este idioma(creo que lo es para cualquiera, pero es una realidad que los textos que vale la pena leer vienen escritos en este idioma), aunado a eso, también es posible que la palabra reactividad es un término que no habías escuchado anteriormente, así que vamos a ver con el siguiente ejemplo, que las propiedades reactivas en Vue, son simplemente la capacidad de observar y lanzar cambios instantáneos que se dan en función de la lógica de la aplicación cuando se aplica esa lógica a uno o más de los datos definidos en el objeto de datos principal del objeto Vue. Aunque primero observaremos lo que sucede cuando no se vinculan correctamente los datos necesarios con los que trabaja la aplicación o como lo dice el libro Vue-js up and running de Callum Macrae, editorial O´really, y lo cito textualmente: Vue observa el objeto de datos para cambiar y actualizar el DOM cuando cambian esos datos. Ahora para tener una visión más clara de lo que trato de explicar

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Shopping List</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/estilos.css">
  <script src="js/vue.js"></script>
</head>
<body>
  <!--<div class="container"> </div> -->
  <div id = "app" >
    <div class="form-group">
      <input v-model="newItem" class="form-control ancho"/>
      <button @click="items.push(newItem)" class="btn btn-primary">Añadir a la lista</button>
    </div>
    
     <div class="lista">
       <ul>
         <li v-for="(item,i) in items" :key="i">{{ item }}</li>
         <button @click="items.splice(i,1)" class="btn btn-default">Quitar!</button>
       </ul>
     </div>
     
  </div>
  <script>       
   
   let vm = new Vue ({
     el : '#app' ,
      data : {
        newItem:'',
        items:['Reloj','Zapatos','Mochila','Videojuego','Libreta','Consola Videojuego'],
      },
    });
  </script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Ahora si pruebas lo anterior en tu navegador, verás en la consola de éste:

--img--

Este error se da precisamente a que el index que se usa en la directiva for, no se ha declarado como una propiedad reactiva, pero en la lógica del script, esta variable cambia constantemente en función de si se añaden o quitan elementos. Ahora cambiemos varios de los elementos de nuestro script:

<body>
  <!--<div class="container"> </div> -->
  <div id = "app" >
    <div class="form-group">
      <input v-model="newItem" class="form-control ancho"/>
      <button @click="createI(newItem)" class="btn btn-primary">Añadir a la lista</button>
      <label>{{ totalItems +' '+mensajeProductos }}</label>
    </div>
    
     <div class="lista">
       <ul>
         <li v-for="(item,i) in items" :key="i">{{ item }}</li>
         <button @click="deleteI(i)" class="btn btn-success">Quitar!</button>
       </ul>
     </div>
     
  </div>
  <script>       
   
   let vm = new Vue ({
     el : '#app' ,
      data : {
        newItem:'',
        items:['Reloj','Zapatos','Mochila','Videojuego','Libreta','Consola Videojuego'],
        i:this.totalItems
      },
      methods:{
        createI(newItem){
          this.items.push(newItem)
          this.i++
        },
        deleteI(index){
          this.items.splice(index,1)
          this.i--
        }
      },
      computed:{
        totalItems(){
          return this.items.length 
        },
        mensajeProductos(){
          if(this.totalItems > 1)
           return "Producto en la lista"
          else
          return "Productos en la lista"
        }
      }
    });
 
  </script>

Ahora, pasemos con las propiedades computadas que de hecho están muy relacionadas con las propiedades reactivas y tienen similitudes con estas, es decir, están a medio camino entre las propiedades del data de Vue y los métodos, debido que se puede acceder a ellas mediante su nomenclatura, pero también se pueden procesar datos dentro de estas, aunque es importante señalar que no reciben parámetros. Veamos un ejemplo en el que una propiedad computada evaluará si el total de ítems en la lista es mayor a 1, con lo que nos devolvería un mensaje en función de esto; pero si la propiedad computada evalúa que solo hay un elemento, entonces nos devolverá otro tipo de mensaje:

computed:{
        totalItems(){
          return this.items.length 
        },
        mensajeProductos(){
          if(this.totalItems > 1)
           return "Producto en la lista"
          else
          return "Productos en la lista"
        }
      }

También como nota adicional, quiero comentar que las propiedades computadas solo procesan los datos una sola vez si estos no cambian, y guardan el resultado del proceso en el sistema de cache de Vue, por lo que, si en determinado momento hicieses algún tipo de aplicación que necesitará procesar un conjunto de datos muy grande, te convendría usar una propiedad computada para que asegurar un mejor rendimiento de tu aplicación.

Vue es un entorno de javascript relativamente reciente, y es sin duda interesante, por lo que será importante seguir estudiándolo.