Los valores y métodos calculados son muy diferentes en Vue y definitivamente no son intercambiables en la mayoría de los casos.

Propiedad calculada

Un nombre más apropiado para un valor calculado es una propiedad calculada . De hecho, cuando se crea una instancia de Vue, las propiedades calculadas se convierten en una propiedad de Vue con un getter y, a veces, un setter. Básicamente, puede pensar en un valor calculado como un valor derivado que se actualizará automáticamente cada vez que se actualice uno de los valores subyacentes utilizados para calcularlo. No llamas a un computado y no acepta ningún parámetro. Usted hace referencia a una propiedad calculada como lo haría con una propiedad de datos. Aquí está el ejemplo clásico de la documentación :

 computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }

Que se hace referencia en el DOM de esta manera:

 <p>Computed reversed message: "{{ reversedMessage }}"</p>

Los valores calculados son muy valiosos para manipular los datos que existen en su Vue. Siempre que desee filtrar o transformar sus datos, normalmente utilizará un valor calculado para ese fin.

 data:{ names: ["Bob", "Billy", "Mary", "Jane"] }, computed:{ startsWithB(){ return this.names.filter(n => n.startsWith("B")) } } <p v-for="name in startsWithB">{{name}}</p>

Los valores calculados también se almacenan en caché para evitar el cálculo repetitivo de un valor que no necesita volver a calcularse cuando no ha cambiado (ya que podría no estar en un bucle, por ejemplo).

Método

Un método es solo una función vinculada a la instancia de Vue. Solo se evaluará cuando lo llame explícitamente. Como todas las funciones de JavaScript, acepta parámetros y se volverá a evaluar cada vez que se llame. Los métodos son útiles en las mismas situaciones que cualquier función es útil.

 data:{ names: ["Bob", "Billy", "Mary", "Jane"] }, computed:{ startsWithB(){ return this.startsWithChar("B") }, startsWithM(){ return this.startsWithChar("M") } }, methods:{ startsWithChar(whichChar){ return this.names.filter(n => n.startsWith(whichChar)) } }

La documentación de Vue es realmente buena y de fácil acceso. Lo recomiendo.

Aquí hay un desglose de esta pregunta.

Cuándo usar métodos

• Para reaccionar a algún evento que sucede en el DOM
• Para llamar a una función cuando algo sucede en su componente.
• Puede llamar a un método desde las propiedades calculadas o los observadores.

Cuándo usar propiedades calculadas

• Necesita componer nuevos datos a partir de fuentes de datos existentes
• Tiene una variable que usa en su plantilla que se crea a partir de una o más propiedades de datos
• Desea reducir un nombre de propiedad anidado y complicado a uno más legible y fácil de usar (pero actualícelo cuando cambie la propiedad original)
• Debe hacer referencia a un valor de la plantilla. En este caso, crear una propiedad calculada es lo mejor, porque se almacena en caché.
• Necesita escuchar los cambios de más de una propiedad de datos