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.
Computed properties
EVITANDO EL RECÓMPUTO
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].
Métodos
OPERANDO CON LAS PROPIEDADES
Dentro de una instancia Vue además de las propiedades se exponen métodos que operan sobre los datos o ejecutan acciones. Los métodos se ejecutan cada vez que las invocamos, cosa que no ocurre con las propiedades computadas, ejecutadas cada vez que alguna de las variables utilizadas en la obtención de un resultado en las propiedades computadas cambia su valor; en dicho caso se ejecutaría la propiedad, para recalcular.
Estos métodos se declaran dentro de la instancia dentro del bloque methods, y se pueden asociar a los elementos HTML de la instancia.
En este ejercicio vamos a relacionar un componente de tipo botón con una acción que se corresponderá con un método declarado en la instancia Vue. Para indicar esta relación usamos la directiva v-on que se coloca dentro del HTML del botón y el evento (en este caso el evento de click).
<button type=”button” v-on:click=”showMessage”>Mostrar Título</button>
Una vez dado este paso creamos un bloque methods en la instancia y dentro de este creamos la función showMessage que concatenará la propiedad title a un texto.
methods: {
showMessage: function() {
console.log(‘Showing message: ‘+this.title + ‘ Aprendamos!’);
return this.title + ‘ Aprendamos!’;
}
}
Posteriormente declaramos dentro de una etiqueta h1 el método para renderizar el resultado de la función [1].
<h1>{{ showMessage() }}</h1>
Para volver a renderizar el resultado de la función accionamos el botón, si nos fijamos se calcula cada vez que salta el evento asociado al botón [2].
Componentes de la instancia
INSTANCIA VUE
Hasta ahora hemos estado jugando con la instancia de Vue, su ciclo de vida, el renderizado y el doble enlazado de propiedades, los métodos, etc., pero no nos hemos parado con los bloques básicos que tiene.
Una instancia se compone de:
• $el: es el objeto componente HTML al que estará asociado mediante el id correspondiente
• $data: es el objeto que contiene las propiedades de la instancia
• $refs: es el objeto donde se registran los elementos marcados con el atributo ref.
Para ilustrarlo en este ejercicio hemos creado una instancia de Vue con cada uno de los bloques mencionados a la que hemos añadido unas sentencias que imprimen por consola cada uno de estos elementos para que podamos ver su contenido cuando se carga la página.
El contenido de $el es efectivamente el objeto que contiene la definición del HTML de nuestra instancia. Si inspeccionamos el objeto accediendo a la propiedad innerHTML nos devuelve en formato texto el contenido en lenguaje HTML [1].
El contenido de $data nos devuelve el objecto con las variables como la de nuestro ejercicio la denominada message.
Podemos también invocar los métodos de nuestra instancia tal y como vemos en el ejercicio y nos ejecutará la función.
Dentro de $refs tenemos un objeto con los elementos marcados con el atributo ref en el HTML de nuestra instancia, en este caso son dos elementos h2 (mysubtitle y mysubtitle2).
Hemos añadido un botón que tiene asociado el método clickedButton y si lo accionamos se nos mostrarán dos mensajes en los elementos h2 referenciados. En este método accedemos a las propiedades de los componentes para añadirles un mensaje y un estilo que se hará visible en nuestra página una vez se ejecute [2].