I valori e i metodi calcolati sono molto diversi in Vue e nella maggior parte dei casi non sono assolutamente intercambiabili.
Proprietà calcolata
Un nome più appropriato per un valore calcolato è una proprietà calcolata . Infatti, quando viene creata un'istanza di Vue, le proprietà calcolate vengono convertite in una proprietà di Vue con un getter e talvolta un setter. Fondamentalmente puoi pensare a un valore calcolato come un valore derivato che verrà automaticamente aggiornato ogni volta che viene aggiornato uno dei valori sottostanti utilizzati per calcolarlo. Non si chiama un computer e non accetta alcun parametro. Fai riferimento a una proprietà calcolata proprio come faresti con una proprietà di dati. Ecco il classico esempio dalla documentazione :
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
A cui si fa riferimento nel DOM in questo modo:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
I valori calcolati sono molto utili per manipolare i dati esistenti su Vue. Ogni volta che desideri filtrare o trasformare i tuoi dati, in genere utilizzerai un valore calcolato a tale scopo.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
I valori calcolati vengono anche memorizzati nella cache per evitare il calcolo ripetitivo di un valore che non deve essere ricalcolato quando non è cambiato (poiché potrebbe non essere presente in un ciclo, ad esempio).
Metodo
Un metodo è solo una funzione associata all'istanza Vue. Sarà valutato solo quando lo chiami esplicitamente. Come tutte le funzioni javascript accetta parametri e sarà rivalutato ogni volta che viene chiamato. I metodi sono utili nelle stesse situazioni qualsiasi funzione è utile.
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 documentazione di Vue è davvero buona e facilmente accessibile. Lo consiglio.
