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

Einführung und Verwendung des JS-Beobachtermodus

Inhaltsverzeichnis I. Definition 2. Anwendungssze...

Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts

1. Anforderungsbeschreibung Bei einem bestimmten ...

Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien

Im Forum fragen Internetnutzer oft: „Kann ich den...

Zusammenfassung der SQL-Deduplizierungsmethoden

Wenn wir SQL zum Extrahieren von Daten verwenden,...

Verstehen Sie das Prinzip des Seitenersetzungsalgorithmus anhand von Codebeispielen

Algorithmus zum Ersetzen von Seiten: Das Wesentli...

Detaillierte Schritte zum Einrichten des Netzwerks für die mit Win10 gelieferte virtuelle Maschine (grafisches Tutorial)

1. Klicken Sie auf den Server-Host und dann in de...

Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen

1. Was ist Pip pip ist ein Python-Paketverwaltung...

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Rendern Definieren Sie das Skelett, schreiben Sie...

Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)

Überprüfen Sie, ob Ihr CUDA installiert ist Geben...

Implementierung eines Nginx-Load-Balancing-Clusters

(1) Experimentelle Umgebung youxi1 192.168.5.101 ...

Eine kurze Diskussion über die Fallstricke der React UseEffect-Abschließung

Problemcode Schauen Sie sich den Code eines durch...

Einführung in häufig verwendete Schriftarten im Web (Schriftarten, die von iOS- und Android-Browsern unterstützt werden)

Das Jahr ist zu Ende und es gibt weniger Aufgaben...

25 Beispiele für die Verwendung kreisförmiger Elemente im Webdesign

Heute listet dieser Beitrag einige großartige Beis...

CentOS 7-Konfiguration Tomcat9+MySQL-Lösung

Tomcat konfigurieren Installieren Sie zuerst Tomc...

Detailliertes Tutorial zur Installation von phpMyAdmin unter Ubuntu 18.04

Wir werden phpMyAdmin installieren, damit es mit ...