Angel Vazquez Vazquez - Aprender VueJS con 100 ejercicios prácticos

En el caso de que eliminemos el componente podremos forzar su destrucción a través del botón Destroy comprobar que la instancia pasa por los métodos beforeDestroy y destroyed [5].

Volvemos de nuevo con nuestro blog de viajes, en esta ocasión además de listar los artículos escritos y el índice querremos añadir un pequeño apartado para editar nuevos artículos.

En primer término, crearemos un input para escribir un título para nuestro artículo y una caja de texto más amplia para poder escribir todo nuestro artículo en la misma [1].

Además de crear el marcado en lenguaje HTML añadiremos a cada input un nuevo atributo con el siguiente formato v-model=”nombreVariable” para enlazar la variable con el contenido que escribamos. Del mismo modo tendremos que declarar esas variables con los nombres que habremos elegido en el código Javascript de la instancia Vue [2].

Posteriormente añadiremos el título y el contenido en la página para que se renderice a medida que se escribe y podamos ir viendo cómo queda [3]. Esta es la “magia” del enlazado de variables con los inputs ya que somos capaces de darle un valor a una variable dentro de la instancia e ir mostrando lo que guarda esa variable dentro del contexto de nuestra instancia. [4]

Simplemente con estos pasos tendremos una forma fácil de añadir un nuevo artículo con su título y contenido y poder ver el renderizado en la página inmediatamente a medida que vamos generando contenido[5].

Hasta ahora hemos visto cómo hacer el enlazado entre las variables y su contenido y la renderización en la web de los cambios. Hemos hablado de las variables de la instancia de Vue: cómo declararlas, manejarlas y mostrar su contenido.

Para observar una propiedad lo único que tendremos que hacer es declarar dentro en la instancia una variable dentro del bloque watch. El bloque watch se define como un objeto, y cada variable dentro del mismo es una función con el mismo nombre, con lo que cada vez que la variable cambie se ejecutará una función con dos argumentos: un valor antes del cambio y el nuevo valor.

Para ilustrar este concepto en este ejercicio veremos cómo observar variables de la instancia y mostrar su resultado. Compondremos una nueva página con un input y veremos cómo cambia la propiedad observada visualizándolo en una consola dentro de la propia página.

En el apartado del HTML tenemos nuestro título de página y un input para meter texto libre que enlazamos con el atributo v-model [1], y en el apartado del código Javascript creamos un bloque watch en el que observamos la variable message además de escribir la función que se ejecutará cuando cambie su valor [2].

Vemos que cada vez que hacemos cambios en el texto [3] se ejecuta la función con el valor antes del cambio y el nuevo valor [4].

Watch permite detectar cambios en los valores que se les proporciona a componentes hijos a través de las “props”, detectando cambios en el valor proporcionado en sus props, para finalmente refrescar el valor del componente, aunque este uso lo veremos con más detalle en otros ejercicios.

Hasta ahora hemos manejado propiedades y métodos de la instancia. Sabemos cómo declarar propiedades, cómo modificarlas y con ello vemos cómo se renderizan automáticamente de nuevo en la página.

En este ejercicio veremos cómo usar las computed properties que nos dan un punto extra de eficiencia ya que solo se evaluarán en el momento que afecte a alguna parte de su cálculo.

Imaginemos que tenemos una pequeña calculadora de sumas y restas en la que tenemos cuatro inputs que se corresponden con los diferentes operandos involucrados [1].

Contamos con cuatro propiedades en el apartado data y dos métodos diferentes encargados de hacer el cómputo correspondiente y mostrarnos el resultado [2].

Ahora mismo si editamos alguno de los operandos vemos que se efectúa el cálculo y se muestra el resultado después del signo igual. Hasta aquí es lo que se espera de nuestra calculadora personal, ¿no? Sin embargo, si vamos al detalle de cómo se efectúan los cálculos revisando la consola, podemos comprobar que cada vez que modificamos un solo operando se hacen los cálculos de todas las operaciones que tengamos declaradas.

Para nuestro caso quizá no es algo muy crítico desde el punto de vista de la eficiencia, pero nos vale para ver que, si se hiciera algún cálculo costoso, este repetiría fuese cual fuese el cambio en la instancia [3].

Para evitar este recálculo haremos uso de las computed properties simplemente sustituyendo el bloque de methods por un bloque computed y cambiar las llamadas para el cálculo de los resultados como si fueran propiedades de la instancia [4].

Con esta modificación podemos comprobar que si modificamos alguno de los operandos solo se volverán a calcular aquellas operaciones en las que ese operando esté involucrado, mientras que el resto no se recalcularán [5].

Para comprobar cómo se hace el recálculo utilizaremos el operando 2 en ambas propiedades computadas, con lo que podremos jugar y ver qué es lo que se recalcula en función del operando que modifiquemos [6].