Propiedades computadas y métodos en Vue

Última actualización:

Antes de empezar es recomendable que le eches un ojo a las Variables de Vue ya que vas a poder usarlas dentro de los métodos y de las computadas que vamos a crear.

Métodos en los componentes

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>
  export default {
    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>
  export default {
    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.

Veamos un ejemplo accediendo a una variable:

<script>
  export default {
    data: () => ({
      value: 20
    }),
    methods: {
      calculate() {
        console.log(this.value * 5);
      }
    }
  };
</script>

Ahora un ejemplo llamando a otro método:

<script>
  export default {
    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>
  <div class="content">
    {{ calculate() }}
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: 20
    }),
    methods: {
      calculate() {
        return this.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.

Como conclusión, siempre que accedas a algo de la lógica del componente desde la vista tienes NO tienes que usar el this, en cambio si llamas desde un método a otro o a una variable o computada entonces si que tienes que usar 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>
  export default {
    data: () => ({
      value: 20
    }),
    methods: {
      calculate() {
        let aux = 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 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.

Propiedades computadas o computed properties

Las propiedades computadas o computed properties son una característica muy interesante de Vue.

Básicamente una computada es una variable, la diferencia con las Variables de Vue es que las computadas normalmente transforman la variable o hacen algún tipo de cálculo antes de devolverla.

Esto de las computadas es como los típicos getters de otros lenguajes de programación. Básicamente son funciones que retornan un valor.

Ejemplo típico, tienes una variable en el data con un número y necesitas una variable que sea el doble de esa variable.

Como vimos al crear variables no se puede hacer que una variable dependa de otra, para eso están las computadas.

<template>
  <div class="content">
    {{double}}
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
      double() {
        return this.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.

Otra cosa importante de las computadas es que siempre tienen que devolver un valor.

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 cuando una de las variables o computadas de su interior cambie. Y si, desde una computada se puede llamar a otra computada sin problemas, recuerda usar el this.

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>
  <div class="content">
    {{double}} - {{calculate()}}
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
      double() {
        return this.value * 2;
      }
    },
    methods: {
      calculate() {
        return this.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.

Ahora que sabes crear métodos puedes crear Eventos de click en Vue para que puedas ejecutarlos cuando hagas click en un botón por ejemplo.

Lo siguiente que te recomiendo una vez entiendas esto es que eches un vistazo al Ciclo de vida de Vue para que puedas ejecutar métodos y hacer cosas cuando el componente cargue o se elminine.