Introducción
En el capítulo de hoy vamos a ver una de las partes fundamentales de Vue, los métodos y las propiedades computadas.
Ahora veremos que los métodos los podemos llamar desde dentro de las vistas, por lo que serán esenciales para dotar de lógica a los componentes web que hemos creado hasta ahora.
Este artículo es bastante importante si estás aprendiendo Vue y te recomiendo que lo leas varias veces si es necesario para entenderlo.
Métodos
Vue también tiene métodos, y funcionan igual que en los otros lenguajes de programación, es decir, se pueden crear para poder llamarlos desde otra parte del código y así evitar la repetición de código, veamos un ejemplo:
<script>exportdefault{methods:{print(){console.log("Esto es un método, por el momento no se puede ejecutar");}}};</script>Como ves, para crear métodos lo que tienes que hacer es poner dentro del componente un objeto llamado methods. Siempre se tiene que llamar así y siempre tiene que ser un objeto. Dentro, creamos las funciones, es decir, tantos métodos como queramos separados por comas. Por ejemplo si quieres crear dos métodos:
<script>exportdefault{methods:{print(){console.log("Esto es un método, por el momento no se puede ejecutar");},anotherPrint(){console.log("Esto es otro método, por el momento no se puede ejecutar");}}};</script>Si desde un método quieres llamar a otro, o quieres acceder a una variable del data, tenemos que usar siempre el this. Si no sabes lo que es el data te recomiendo que le eches un ojo a este tutorial que escribí: Sistema de vistas de Vue
Veamos un ejemplo accediendo a una variable:
<script>exportdefault{data:()=>({value:20}),methods:{calculate(){console.log(this.value*5);}}};</script>Ahora un ejemplo llamando a otro método:
<script>exportdefault{data:()=>({value:20}),methods:{double(){this.value=this.value*2;this.print();},print(){console.log(this.value);}}};</script>¿Fácil no? Pues ahora vamos a conectar los métodos en las vistas para que los puedas llamar desde ahí, para ello vamos a hacer que la función devuelva el valor para que se pinte en la vista:
<template><divclass="content">
{{calculate()}}
</div></template><script>exportdefault{data:()=>({value:20}),methods:{calculate(){returnthis.value*2;}}};</script>Como pasaba al pintar variables, para poder llamar a los métodos necesitas poner dobles llaves {{ }}. Otro detalle es que no necesitas hacer uso del this. Es decir, como conclusión, siempre que accedas a algo de la lógica del componente (lo que va dentro de la etiqueta script), tienes que usar dobles llaves y no tienes que usar el this. En cambio, si quieres llamar desde dentro de la lógica a algo necesitas usar siempre el this.
Otra cosa que se puede hacer dentro de los métodos es crear variables auxiliares locales a ese método, es decir, a esas variables no se puede acceder desde otros métodos.
<script>exportdefault{data:()=>({value:20}),methods:{calculate(){letaux=this.value*2;console.log(aux);}}};</script>Por mucho que queramos, desde otro método no podremos acceder a la variable aux, de no ser que hagamos un return de esa variable dentro de la función o que la declaremos dentro del data.
Estas variables locales (puedes crearlas con let o const) viene muy bien cuando necesitas hacer cálculos o operaciones intermedias con valores y no necesitas almacenar su valor. Como se declaran dentro de la función, cuando vuelvas a llamar a la función volveran a resetearse. Si quieres guardar el valor de las variables locales entre ejecuciones del método tienes que declarar la variable arriba:
<template><divclass="content">
{{calculate()}} - {{calculate()}} - {{calculate()}}
</div></template><script>lettotal=0;exportdefault{methods:{calculate(){total++returntotal;}}};</script>Si te fijas, como ahora el valor que accedemos está fuera del componente (arriba del export default) no tienes que poner el this. He llamado desde la vista 3 veces al valor para que se vea que la variable total se mantiene para cada ejecución.
Si declaras total como variable local dentro de la función en la vista se pintaría 0 - 0 - 0.
Eventos de click
Dentro de vue existe una cosa llamada eventos que veremos con más detalle más adelante. Por el momento tienes que saber que existe un evento click que sirve para saber cuándo el usuario pulsa sobre un elemento del HTML.
En la vista, dentro del evento de click podemos ejecutar un método del componente:
<template><divclass="content"><button@click="calculate()">Calculate</button></div></template><script>exportdefault{data:()=>({value:20}),methods:{calculate(){letaux=this.value;console.log(this.double(aux));},double(value){returnvalue*2;}}};</script><style scoped></style>Como te habrás dado cuenta, si quieres crear un evento de click, en este caso en un botón, lo puedes hacer poniendo el @ y el nombre del evento, en este caso el de click. Dentro de las comillas del evento de clic, en la vista, se llama al método asociado a ese método, es decir, el método que se va a ejecutar en cada clic. Además, dentro de las comillas no necesitas poner llaves para llamar al método como hasta ahora.
Listo, si abres la página y haces click en el botón, en la consola del navegador verás que se pinta el número.
Lo bueno de los eventos de click es que los podemos asociar con cualquier etiqueta del HTML, no tiene por qué ser botones (aunque por temas de accesibilidad lo mejor es botones), por ejemplo:
<template><divclass="content"><span@click="calculate()">Calculate</span></div></template><script>exportdefault{data:()=>({value:20}),methods:{calculate(){letaux=this.value;console.log(this.double(aux));},double(value){returnvalue*2;}}};</script><style scoped></style>Este ejemplo funciona exactamente igual que el ejemplo anterior.
Como las propiedades del data son reactivas, cuando actualicemos su valor dentro de un método se actualizará cambiando automáticamente la vista:
<template><divclass="content"><button@click="increment()">Increment</button><span> Current value: {{value}}</span></div></template><script>exportdefault{data:()=>({value:20}),methods:{increment(){this.value++;}}};</script>
Propiedades computadas
Las propiedades computadas o computed properties son una característica muy interesante de Vue. Como su nombre indica, son propiedades asociadas a componentes que son computadas, lo que es lo mismo, son variables a las que antes se le pueden aplicar una serie de cálculos o transformaciones.
Como hemos hablado con anterioridad, las variables que creas en el data no pueden depender de otras variables del data, por ejemplo no puedes crear una variable en el data cuyo valor sea el doble de otra variable. Las propiedades computadas vienen a resolver este problema.
Las computadas son funciones que SIEMPRE tienen que devolver un valor. Actúan como un getter de otros lenguajes de programación. Veamos un ejemplo sencillo.
<template><divclass="content">
{{double}}
</div></template><script>exportdefault{data:()=>({value:20}),computed:{double(){returnthis.value*2;}}};</script><style scoped></style>Como en los métodos, dentro del objeto computed creamos todas funciones separadas por comas. Es importante saber que las computadas nunca pueden recibir un parámetro desde fuera de la función. Si necesitas pasar un valor a una computada tienes que crear un método.
Dentro de cada computada con el this accedemos a los valores del data o a los métodos que necesitemos.
Las computadas se comportan igual que las variables. Si por ejemplo llamas dos veces a una computadas, si el resultado es el mismo, Vue es lo suficientemente listo como para no tener que recalcular cada vez su valor.
Además, las variables computadas son reactivas también y actualizarán su valor en la vista cuando cambie su valor.
Otra cosa muy interesante de las computadas es que Vue las trata como una variable más y no como métodos. Esto quiere decir que dentro de los métodos o de la vista podemos llamar a las propiedades computadas como si fueran variables:
<template><divclass="content">
{{double}} - {{calculate()}}
</div></template><script>exportdefault{data:()=>({value:20}),computed:{double(){returnthis.value*2;}},methods:{calculate(){returnthis.double+1;}}};</script><style scoped></style>Cuando el valor de la variable value cambie, como se usa dentro de la computada, la computada se actualizará automáticamente y su valor se mostrará en la vista
Diferencia entre method y computed
A simple vista los métodos y las computadas se pueden confundir, porque un método puede usarse como una especie de computada si devolvemos valores también, pero hay diferencias.
En primer lugar, como hemos dicho las computadas son reactivas y su valor se actualiza solo. Con un método que devuelva algo del data solo se ejecutaría la primera vez y no reaccionaria a un cambio en la variable del data.
Otra diferencia es que las propiedades computadas tienen caché, es decir, utilizar propiedades computadas es más óptimo porque si Vue detecta que la computada va a devolver el mismo valor, no ejecutará la computada ahorrando cálculos .Los métodos se ejecutan siempre cada vez aunque el resultado sea el mismo.
Aunque se puede hacer, dentro de las computadas se recomienda no llamar a los métodos del componente. Como hemos dicho el propósito de las computadas es devolver valores del definidos en el data pero con alguna transformación. Además se pueden usar las computadas para devolver un valor que dependa de varias variables del data.
Conclusiones
Los métodos y las computadas en Vue son de lo que más va a usar en todas tus aplicaciones web, es muy importante que las entiendas bien, lo mejor es que practiques por tu cuenta porque así es como mejor se aprende.
En posteriores capítulos trataremos el ciclo de vida de los componentes de Vue para que puedas controlar lo que ocurre cuando se crea, se actualiza y se destruyen los componentes.