Kann ich Parameter in berechneten Eigenschaften in Vue.Js übergeben

Question

ist es möglich, Parameter in berechneten Eigenschaften in Vue.Js übergeben. Ich kann sehen, wenn Getter/Setter mit berechnet, sie können einen Parameter nehmen und es einer Variablen zuweisen. hier wie von documentation:

// ... 
computed: { 
    fullName: { 
    // getter 
    get: function() { 
     return this.firstName + ' ' + this.lastName 
    }, 
    // setter 
    set: function (newValue) { 
     var names = newValue.split(' ') 
     this.firstName = names[0] 
     this.lastName = names[names.length - 1] 
    } 
    } 
} 
// ... 

Ist das auch möglich:

// ... 
computed: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
} 
// ... 

Wo berechnete Eigenschaft ein Argument und gibt gewünschte Ausgabe nimmt. Wenn ich dies jedoch versuche, bekomme ich diesen Fehler:

Sollte ich Methoden für solche Fälle verwenden?

Answer 1

Sie sollten verwenden Methoden:

<span>{{ fullName('Hi') }}</span> 

methods: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
} 

P. S. Der Unterschied zwischen der berechneten Eigenschaft und der Methode besteht darin, dass berechnete Eigenschaften zwischengespeichert werden und sich nur ändern, wenn sich ihre Abhängigkeiten ändern. Aus diesem Grund können Sie dort keine Parameter übergeben. Methoden werden jedes Mal ausgewertet, wenn Sie sie anrufen.

Answer 2

Ich bin mir nicht ganz sicher, was Sie erreichen möchten, aber es sieht so aus, als wären Sie vollkommen in Ordnung mit der Methode statt berechnet!

Answer 3

Sie können Methoden verwenden, aber ich bevorzuge weiterhin die Verwendung von berechneten Eigenschaften anstelle von Methoden, wenn sie keine Daten mutieren oder keine externen Effekte haben.

Sie Argumente berechnete Eigenschaften auf diese Weise passieren kann (nicht dokumentiert, aber von Maintainer vorgeschlagen, kann mich nicht erinnern, wo):

computed: { 
    fullName: function() { 
     var vm = this; 
     return function (salut) { 
      return salut + ' ' + vm.firstName + ' ' + vm.lastName; 
     }; 
    } 
} 

EDIT: Bitte nicht diese Lösung verwenden, ist es nur erschwert Code ohne irgendwelche Vorteile.

Answer 4

Ja Methoden gibt es für die Verwendung von Parametern. Wie bei den oben angegebenen Antworten ist es in Ihrem Beispiel am besten, Methoden zu verwenden, da die Ausführung sehr leicht ist.

Nur als Referenz, in einer Situation, wo das Verfahren ist komplex und die Kosten hoch, können Sie die Ergebnisse zwischenzuspeichern wie so:

data() { 
    return { 
     fullNameCache:{} 
    }; 
} 

methods: { 
    fullName(salut) { 
     if (!this.fullNameCache[salut]) { 
      this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName; 
     } 
     return this.fullNameCache[salut]; 
    } 
} 

Anmerkung: Wenn diese Verwendung watchout für Speicher, wenn mit Tausenden Umgang

Answer 5

Nun, technisch gesprochen können wir einen Parameter an eine berechnete Funktion übergeben, genauso wie wir einen Parameter an eine Getter-Funktion in vuex übergeben können. Eine solche Funktion ist eine Funktion, die eine Funktion zurückgibt.

Zum Beispiel in den Getter eines Ladens:

{ 
    itemById: function(state) { 
    return (id) => state.itemPool[id]; 
    } 
} 

Dieser Getter kann die berechneten Funktionen einer Komponente zugeordnet werden:

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]) 
} 

Und wir können in unserem diese berechnete Funktion Vorlage wie folgt:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div> 

Wir können den gleichen Ansatz anwenden, um eine berechnete Meth zu erstellen od das braucht einen Parameter.

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]), 
    descriptionById: function() { 
    return (id) => this.itemById(id).description; 
    } 
} 

Und es in unserer Vorlage verwenden:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div> 

Nachdem dies gesagt ist, ich sage nicht, hier, dass es der richtige Weg ist mit Vue, Dinge zu tun.

Ich konnte jedoch beobachten, dass, wenn das Element mit der angegebenen ID im Speicher mutiert ist, die Ansicht ihren Inhalt automatisch mit den neuen Eigenschaften dieses Elements aktualisiert (die Bindung scheint einwandfrei zu funktionieren).