Detaillierte Erklärung der berechneten Eigenschaften in Vue

Detaillierte Erklärung der berechneten Eigenschaften in Vue

Lassen Sie uns heute über die berechnete Eigenschaft in Vue sprechen. Um die Vorteile berechneter Eigenschaften besser zu verstehen, wollen wir die berechneten Eigenschaften zunächst anhand eines Falls langsam verstehen. Es gibt den folgenden Fall: Definieren Sie zwei Eingabefelder und ein Span-Tag. Der Inhalt im Span-Tag ist der Wert der beiden Eingabefelder. Der Inhalt im Span-Tag ändert sich mit dem Inhalt im Eingabefeld.

Interpolationsausdrücke

Um diesen Effekt zu erzielen, verwenden wir zunächst die Interpolationsausdrucksmethode

 <Text>
    <div id="app">
        Nachname: <input type="text" v-model=firstName> </br>
        </br>
        Name: <input type="text" v-model=Nachname></br>
        </br>
        Name: <span>{{Vorname}}{{Nachname}}</span>
​
    </div>
</body>
<Skripttyp="text/javascript">
    neuer Vue({
        el: "#app",
        Daten: {
            Vorname: 'Name',
            Nachname: '三'
        },
        Methoden: {
        }
    })
​
</Skript>

Wir können feststellen, dass wir den gewünschten Effekt problemlos erzielen können. Wenn ich jedoch jetzt eine weitere Anforderung hinzufügen möchte, muss der erste Buchstabe bei der Eingabe von Englisch groß geschrieben werden. Zu diesem Zeitpunkt können wir nur die folgende Methode verwenden

 <Text>
    <div id="app">
        Vorname: <input type="text" v-model=Vorname> </br>
        </br>
        Nachname: <input type="text" v-model=lastName></br>
        </br>
        vollständigerName: <span>{{firstName.replace(firstName[0],firstName[0].toUpperCase())}} {{lastName.replace(lastName[0],lastName[0].toUpperCase())}}</span>
​
    </div>
</body>
<Skripttyp="text/javascript">
    var str = ''
​
    neuer Vue({
        el: "#app",
        Daten: {
            Vorname: 'joe',
            Nachname: 'lili'
        },
        Methoden: {
        }
    })
</Skript>

Aus dem Interpolationsausdruck ist ersichtlich, dass der gewünschte Effekt zwar erzielt werden kann, der Code jedoch sehr lang und nicht leicht zu lesen ist. Derzeit wird angenommen, dass Methoden hinzugefügt werden können, um diesen Effekt zu erzielen.

Methoden

Fügen Sie den Methoden die Methode fullName hinzu

 <Text>
    <div id="app">
        Vorname: <input type="text" v-model=Vorname> </br>
        </br>
        Nachname: <input type="text" v-model=lastName></br>
        </br>
        vollständigerName: <span>{{fullName()}}</span>
​
    </div>
</body>
<Skripttyp="text/javascript">
    var str = ''
​
    neuer Vue({
        el: "#app",
        Daten: {
            Vorname: 'joe',
            Nachname: 'lili'
        },
        Methoden: {
            vollständiger Name() {
                sei a = '';
                sei b = '';
                wenn (dieser.Vorname.Länge != 0)
                    a = dieser.Vorname.ersetzen(dieser.Vorname[0], dieser.Vorname[0].toUpperCase())
                wenn (this.lastName.length != 0)
                    b = dieser.Nachname.ersetzen(dieser.Nachname[0], dieser.Nachname[0].toUpperCase())
                Rückgabewert a + ' ' + b
            }
        }
    })
​
</Skript>

Wir sehen, dass das Problem zu langer Codes gut durch Methoden gelöst werden kann. Aber wir stehen vor einem anderen Problem. Wenn wir das Datenattribut in vue untersuchen, wissen wir, dass die Stellen, an denen Daten auf der Seite verwendet werden, aktualisiert werden, solange sich die Daten in den Daten ändern. Wenn sich daher die Daten firstName und lastName ändern, wird die Methode fullName erneut aufgerufen, was unter Umständen zu geringer Codeeffizienz führt. Darüber hinaus werden die Methoden in den Methoden so oft ausgeführt, wie sie im Interpolationsausdruck verwendet werden. Aufgrund der Nachteile der beiden oben genannten Methoden hat sich eine andere Methode herausgebildet, nämlich die Verwendung berechneter Eigenschaften.

berechnet

Einige Eigenschaften können berechnet definiert werden: berechnete Eigenschaften. Das Wesen eines berechneten Attributs ist eigentlich eine Methode, es kann jedoch bei der Verwendung direkt als Attribut verwendet werden. Die Besonderheiten sind wie folgt

  • Wenn Sie berechnete Eigenschaften verwenden, müssen Sie () nicht hinzufügen und können nur den Namen schreiben.
  • Wenn die berechnete Eigenschaft die Daten in Daten verwendet, wird der Wert der berechneten Eigenschaft sofort neu berechnet, wenn sich die Daten ändern
  • Das Ergebnis der berechneten Eigenschaft wird bei der ersten Verwendung zwischengespeichert und erst dann erneut ausgewertet, wenn sich die Daten ändern, von denen die Eigenschaft abhängt.
 <Text>
    <div id="app">
        Vorname: <input type="text" v-model=Vorname> </br>
        </br>
        Nachname: <input type="text" v-model=lastName></br>
        </br>
        vollständigerName: <span>{{fullName}}</span></br>
        </br>
        vollständigerName: <span>{{fullName}}</span></br>
        </br>
        vollständigerName: <span>{{fullName}}</span>
​
    </div>
</body>
<Skripttyp="text/javascript">
    var str = ''
​
    neuer Vue({
        el: "#app",
        Daten: {
            Vorname: 'joe',
            Nachname: 'lili'
        },
        berechnet: {
            //Was ist die Funktion von get? Wenn fullName gelesen wird, wird get aufgerufen und der Rückgabewert ist der Wert von fullName. //Wann wird get aufgerufen? 1. Wenn fullName zum ersten Mal gelesen wird. 2. Wenn sich die abhängigen Daten ändern fullName: {
                erhalten() {
                    console.log('Hallo, ich habe die berechnete Nummer angerufen')
                  sei a = '';
                sei b = '';
                wenn (dieser.Vorname.Länge != 0)
                    a = dieser.Vorname.ersetzen(dieser.Vorname[0], dieser.Vorname[0].toUpperCase())
                wenn (this.lastName.length != 0)
                    b = dieser.Nachname.ersetzen(dieser.Nachname[0], dieser.Nachname[0].toUpperCase())
                Rückgabewert a + ' ' + b
                }
            }
        }
    })
</Skript>
</html>

Wir haben zuvor gesagt, dass eine Methode in Methoden, wenn sie n-mal auf einer Seite verwendet wird, n-mal aufgerufen wird. Bei Eigenschaften in „Berechnet“ passiert das jedoch nicht. Im obigen Code haben wir dieselbe berechnete Eigenschaft dreimal auf der Seite verwendet, das Ergebnis aber nur einmal ausgegeben. Ebenso haben wir die vollständige Methode in Methoden verwendet, das Ergebnis aber dreimal ausgegeben, was bedeutet, dass die Methode dreimal aufgerufen wurde. Warum ist das passiert? Dies liegt daran, dass in berechneten Methoden ein Caching-Mechanismus vorhanden ist, in diesen jedoch nicht. Wenn der Code den ersten vollständigen Namen analysiert, wird das Ergebnis des vollständigen Namens zwischengespeichert. Wenn der zweite und dritte vollständige Name analysiert werden, wird festgestellt, dass sich das Ergebnis bereits im Cache befindet, sodass es nicht aufgerufen wird.

Nachdem wir nun ein allgemeines Verständnis für die Verwendung von „Computed“ haben, ergänzen wir es.

In berechneten können wir den Zuweisungseffekt erreichen, indem wir der berechneten Eigenschaft eine Set-Methode hinzufügen

 <Text>
    <div id="app">
        Vorname: <input type="text" v-model=Vorname> </br>
        </br>
        Nachname: <input type="text" v-model=lastName></br>
        </br>
        vollständigerName: <span>{{fullName}}</span></br>
        </br>
    </div>
</body>
<Skripttyp="text/javascript">
    var str = ''
​
    var app = new Vue({
        el: "#app",
        Daten: {
            Vorname: 'joe',
            Nachname: 'lili'
        },
        berechnet: {
            //Was ist die Funktion von get? Wenn fullName gelesen wird, wird get aufgerufen und der Rückgabewert ist der Wert von fullName. //Wann wird get aufgerufen? 1. Wenn fullName zum ersten Mal gelesen wird. 2. Wenn sich die abhängigen Daten ändern fullName: {
                erhalten() {
                    console.log(dies)
                    gib diesen.Vornamen + diesen.Nachnamen zurück
                },
                setze(Wert) {
                    dieser.Vorname = Wert[0]
                    this.lastName = val[1]
                }
            }
        }
    })
​
</Skript>

Wir können sehen, dass sich sowohl firstName als auch lastName ändern, wenn wir fullName in der Konsole einen Wert zuweisen.

Wenn in der berechneten Eigenschaft nur get und kein set vorhanden ist, können Sie es direkt wie den folgenden Code schreiben

 berechnet: {
            vollständiger Name(){
                console.log(dies)
                gib diesen.Vornamen + diesen.Nachnamen zurück
                }
            }

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Verwendung und Demonstration von ref in Vue
  • Von Vue berechnete Eigenschaften
  • setup+ref+reactive implementiert Vue3-Reaktionsfähigkeit
  • So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3
  • Kennen Sie Ref, Computed, Reactive und ToRefs von Vue3?

<<:  Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.

>>:  CSS3 implementiert den Beispielcode der NES-Spielekonsole

Artikel empfehlen

Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3

Effektbild (wenn Sie ein Dreieck wünschen, klicke...

Beispiel für die Implementierung eines globalen Wasserzeichens in Vue

Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...

So führen Sie eine Spring Boot-Anwendung in Docker aus

In den letzten Tagen habe ich gelernt, wie man Sp...

Grundkenntnisse der MySQL-Datenbank

Inhaltsverzeichnis 1. Datenbanken verstehen 1.1 D...

Eine kurze Einführung in Linux-Umgebungsvariablendateien

Im Linux-System können Umgebungsvariablen entspre...

Vue implementiert die Tabellenpaging-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

Anforderungen: Die PC-Seite und die mobile Seite ...

Tutorial zur Installation von MySQL 5.7.18 auf Mac OS 10.12

Ich habe das ganze Internet durchsucht und bin au...

Analyse der Unfallursachen durch Unicode-Signatur BOM

Möglicherweise verwenden Sie hier Include-Dateien,...

So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle

Tabellenstruktur einer MySQL-Tabelle schnell ände...

Schreiben von qualitativ hochwertigem Code – Praxisbuchauszüge zur Web-Frontend-Entwicklung

(Teil 4) Webstandards bestehen aus einer Reihe von...

Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS

Installieren von MySQL 5.7 aus TAR.GZ auf Mac OS ...

JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels

In diesem Artikel wird der spezifische Code von J...

Analyse des Prinzips und der Methode zur Implementierung einer Linux-Festplattenpartition

erinnern: IDE-Festplatte: Die erste Festplatte is...

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung vue-router4 behält den Großteil der...