Aprende las diferencias entre computadas y métodos en Vue

Antes de empezar, lo primero que te recomiendo es que te pases por los artículos de Métodos de Vue y el de Computadas de Vue, ya que este artículo presupone que conoces estos términos de Vue.

Es muy normal confundir métodos y computadas, sobre todo al principio, porque parecen dos cosas muy similares y que se pueden usar para lo mismo.

Lo primero que salta a la vista, es que para usar los métodos tienes que llamarlos como un método normal de un lenguaje de programación (con los paréntesis) mientras que las computadas se usan como variables, por ejemplo:

<template>
  <div class="content">
    {{ activeUsers() - activeUsersComputed }}
  </div>
</template>

<script>
export default {
  data: () => ({
    users: [
      { name: "Pepe", active: false },
      { name: "Juan", active: true },
      { name: "Javi", active: true },
    ],
  }),
  computed: {
    activeUsersComputed() {
      return this.users.filter((user) => user.active);
    },
  },
  methods: {
    activeUsers() {
      return this.users.filter((user) => user.active);
    },
  },
};
</script>

<style scoped></style>

La diferencia fundamental es la reactividad. Las computadas son reactivas, como las variables, mientras que los métodos no lo son.

Que las computadas sean reactivas quiere decir que cuando el valor del data cambie, la computada automáticamente se va a ejecutar y va a devolver el nuevo valor.

Las computadas NO pueden recibir parámetros de entrada, mientas que los métodos sí. Las computadas siempre tienen que hace return de un valor, mientras que los métodos puede que no devuelvan nada.

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.

Por último decir que es normal llamar a las computadas desde dentro de los métodos, mientras que ejecutar métodos dentro de computadas no se recomienda (por lo de la caché), es mejor busca otra alternativa para no tener que hacer eso.