Ist es möglich, Parameter in berechneten Eigenschaften in Vue.Js zu übergeben? Ich kann sehen, wenn Getter / Setter berechnet werden, können sie einen Parameter nehmen und ihn einer Variablen zuweisen. wie hier aus der Dokumentation :
// ...
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
}
}
// ...
Wobei berechnete Eigenschaft ein Argument nimmt und die gewünschte Ausgabe zurückgibt. Wenn ich dies jedoch versuche, wird folgende Fehlermeldung angezeigt:
vue.common.js: 2250 Nicht gefangener TypeError: fullName ist keine Funktion (…)
Sollte ich in solchen Fällen Methoden anwenden?
javascript
vue.js
vuejs2
Saurabh
quelle
quelle
Antworten:
Höchstwahrscheinlich möchten Sie eine Methode verwenden
Längere Erklärung
Technisch können Sie eine berechnete Eigenschaft mit einem Parameter wie dem folgenden verwenden:
(Danke
Unirgy
für den Basiscode dafür.)Der Unterschied zwischen einer berechneten Eigenschaft und einer Methode besteht darin, dass berechnete Eigenschaften zwischengespeichert werden und sich nur ändern, wenn sich ihre Abhängigkeiten ändern. Eine Methode wird jedes Mal ausgewertet, wenn sie aufgerufen wird .
Wenn Sie Parameter benötigen, bietet die Verwendung einer berechneten Eigenschaftsfunktion in einem solchen Fall normalerweise keine Vorteile gegenüber einer Methode. Obwohl Sie damit die parametrisierte Getter-Funktion an die Vue-Instanz binden können, verlieren Sie das Caching, sodass Sie dort keinen wirklichen Gewinn erzielen. Tatsächlich können Sie die Reaktivität (AFAIU) unterbrechen. Weitere Informationen hierzu finden Sie in der Vue-Dokumentation https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
Die einzige nützliche Situation ist , wenn Sie haben einen Getter verwenden und müssen , um es parametrisiert. Diese Situation tritt beispielsweise in Vuex auf . In Vuex ist dies die einzige Möglichkeit, synchron parametrisierte Ergebnisse aus dem Speicher abzurufen (Aktionen sind asynchron). Daher wird dieser Ansatz in der offiziellen Vuex-Dokumentation für seine Getter https://vuex.vuejs.org/guide/getters.html#method-style-access aufgeführt
quelle
<span v-text="fullName('Hi')"></span>
stattdessen funktioniert auch.<span :text="message"></span>
man nicht mehr für Vue 2.0 funktioniert, sondern stattdessen verwenden muss:<span v-text="message"></span>
oder<span>{{ message }}</span>
wie in diesem Codepen gezeigt: codepen.io/Ismael-VC/pen/dzGzJaSie können Methoden verwenden, aber ich bevorzuge es immer noch, berechnete Eigenschaften anstelle von Methoden zu verwenden, wenn diese keine Daten mutieren oder keine externen Auswirkungen haben.
Sie können auf diese Weise Argumente an berechnete Eigenschaften übergeben (nicht dokumentiert, aber von Betreuern vorgeschlagen, weiß nicht mehr, wo):
BEARBEITEN: Bitte verwenden Sie diese Lösung nicht, sie kompliziert nur den Code ohne Vorteile.
quelle
Technisch gesehen 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 Geschäfts:
Dieser Getter kann den berechneten Funktionen einer Komponente zugeordnet werden:
Und wir können diese berechnete Funktion in unserer Vorlage wie folgt verwenden:
Wir können den gleichen Ansatz anwenden, um eine berechnete Methode zu erstellen, die einen Parameter verwendet.
Und verwenden Sie es in unserer Vorlage:
Davon abgesehen sage ich hier nicht, dass es der richtige Weg ist, Dinge mit Vue zu tun.
Ich konnte jedoch feststellen, dass die Ansicht ihren Inhalt automatisch mit den neuen Eigenschaften dieses Elements aktualisiert, wenn das Element mit der angegebenen ID im Geschäft mutiert ist (die Bindung scheint einwandfrei zu funktionieren).
quelle
Filter sind eine von Vue-Komponenten bereitgestellte Funktion, mit der Sie Formatierungen und Transformationen auf jeden Teil Ihrer dynamischen Vorlagendaten anwenden können.
Sie ändern weder die Daten einer Komponente noch etwas anderes, sondern wirken sich nur auf die Ausgabe aus.
Angenommen, Sie drucken einen Namen:
Beachten Sie die Syntax zum Anwenden eines Filters: | filterName. Wenn Sie mit Unix vertraut sind, ist dies der Unix-Pipe-Operator, mit dem die Ausgabe einer Operation als Eingabe an die nächste übergeben wird.
Die Filter-Eigenschaft der Komponente ist ein Objekt. Ein einzelner Filter ist eine Funktion, die einen Wert akzeptiert und einen anderen Wert zurückgibt.
Der zurückgegebene Wert ist derjenige, der tatsächlich in der Vue.js-Vorlage gedruckt wird.
quelle
Sie können Argumente auch an Getter übergeben, indem Sie eine Funktion zurückgeben. Dies ist besonders nützlich, wenn Sie ein Array im Speicher abfragen möchten:
Beachten Sie, dass Getter, auf die über Methoden zugegriffen wird, jedes Mal ausgeführt werden, wenn Sie sie aufrufen, und das Ergebnis nicht zwischengespeichert wird.
Dies wird als method-style Access bezeichnet und ist in den Vue.js-Dokumenten dokumentiert .
quelle
Es gibt jedoch Fälle, in denen Sie dies tun müssen. Ich werde Ihnen ein einfaches Beispiel zeigen, wie Sie mit getter und setter einen Wert an die berechnete Eigenschaft übergeben.
Und das Drehbuch
Wenn Sie auf die Schaltfläche klicken, übergeben wir den Namen 'Roland' an die berechnete Eigenschaft und in
set()
ändern den Namen von 'John Doe' in 'Roland'.Im Folgenden finden Sie einen allgemeinen Anwendungsfall, wenn die Berechnung mit Getter und Setter verwendet wird. Angenommen, Sie haben den folgenden vuex-Shop:
Und in Ihrer Komponente möchten Sie
v-model
einer Eingabe hinzufügen , aber den Vuex-Speicher verwenden.quelle
Ich bin mir nicht ganz sicher, was Sie erreichen wollen, aber es sieht so aus, als ob Sie mit der Methode anstatt mit der Berechnung vollkommen in Ordnung sind!
quelle
wenn Sie verwenden möchten
quelle
Berechnet könnte man berücksichtigen, hat eine Funktion. Für ein Beispiel zur Valdiation könnten Sie also eindeutig Folgendes tun:
Welche Sie verwenden werden wie:
Denken Sie daran, dass Sie das für die Berechnung spezifische Caching immer noch verpassen werden.
quelle
Ja, es gibt Methoden zur Verwendung von Parametern. Wie bei den oben genannten Antworten ist es in Ihrem Beispiel am besten, Methoden zu verwenden, da die Ausführung sehr leicht ist.
Nur als Referenz können Sie in einer Situation, in der die Methode komplex und die Kosten hoch sind, die Ergebnisse wie folgt zwischenspeichern:
Hinweis: Wenn Sie dies verwenden, achten Sie auf den Speicher, wenn Sie mit Tausenden arbeiten
quelle