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 instancia la Vue, las propiedades calculadas se convierten en una propiedad de la 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 llama a un cómputo y no acepta ningún parámetro. Hace referencia a una propiedad calculada tal 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 así:
<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 propósito.
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 ser recalculado 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 será reevaluado cada vez que se llame. Los métodos son útiles en las mismas situaciones, 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(whichCharacter))
}
}
La documentación de Vue es realmente buena y de fácil acceso. Lo recomiendo.
