Cómo crear y usar propiedades computadas en Vue

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.

Además resuelve el problema que vimos de que no puedes crear una variable que tenga el valor de otra variable del data.

Esto de las computadas es como los típicos getters de otros lenguajes de programación. Básicamente son funciones que devuelven un valor del componente y antes hace algún cálculo o transformación.

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

Para esto podrías usar perfectamente los Métodos de Vue, simplemente creas uno que pille el valor y lo devuelva, pero tienes un problema, como ya vimos, si la variable del data la cambias en otro sitio del componente, el método NO se vuelve a ejecutar de forma automática.

Cómo se crean las computadas y las restricciones que tienen

Este ejemplo con las computadas se haría así:

<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.

Dentro de cada computada con el this accedemos a los valores del data o a los métodos que necesitemos. Las computadas siempre van a usar variables del data o otras computadas.

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.

Es decir, esto NO se puede hacer:

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
      double(anotherAmount) {
        return this.value * anotherAmount;
      }
    }
  };
</script>

Otra cosa importante de las computadas es que siempre tienen que devolver un valor. No puede existir computada sin return.

Cómo se usan las computadas

Las computadas se comportan igual que las variables, incluso en su sintaxis, ya que para llamar a una computada no hay que poner el (), aunque se trate de una función, por ejemplo, una computada que usa otra computada:

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
	  plusOne() {
	    return this.value + 1;
	  }
      double() {
        return this.plusOne * 2;
      }
    }
  };
</script>

Mira la diferencia de sintaxis entre una computada y un método:

<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>

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.

Cómo se usa las computadas desde los métodos

También puedes llamar a computadas desde métodos:

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
      double() {
        return this.value * 2;
      }
    },
    methods: {
      print() {
        console.log(this.double);
    }
  };
</script>

<style scoped></style>

Y eso es un poco todo respecto a las computadas. Si tienes dudas con los métodos te recomiendo que le eches un ojo al artículo de Diferencias entre computadas y métodos en Vue para que sepas bien qué diferencia hay entre ambos términos y cuándo usar cada cosa.