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

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

Inhaltsverzeichnis Über Kubernetes Grundlegende U...

Vorteile von INSERT INTO SET in MySQL

Daten in MySQL-Datenbank einfügen. Bisher häufig ...

VMware ESXI-Servervirtualisierungscluster

Inhaltsverzeichnis Zusammenfassung Umgebung und W...

CSS-Stil zum Zentrieren des HTML-Tags im Browser

CSS-Stil: Code kopieren Der Code lautet wie folgt:...

So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu

Discuz! Forum verfügt über zahlreiche Konfiguratio...

Verwenden Sie IISMonitor, um Webseiten zu überwachen und IIS automatisch neu zu starten

Inhaltsverzeichnis 1. Tool-Einführung 2. Arbeitsa...

Analyse des Prozesses zum Veröffentlichen und Bereitstellen von Spring Boot-Anwendungen über Docker

Inhaltsverzeichnis Manuelle Bereitstellung 1. Ers...

Zusammenfassung der allgemeinen Funktionen von regulären Ausdrücken in PostgreSQL

Zusammenfassung der allgemeinen Funktionen von re...

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Inhaltsverzeichnis 1. Einleitung 2. Warum brauche...

Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

Drag & Drop ist eine gängige Funktion im Fron...

Beispiel für die JavaScript-Funktion „CollectGarbage“

Sehen wir uns zunächst ein Beispiel für die Speic...

Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten

Inhaltsverzeichnis Vorwort Untergeordnete Kompone...

VMware12 installiert die Desktopversion von Ubuntu19.04 (Installations-Tutorial)

1. Versuchsbeschreibung Installieren Sie in der v...

Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Das Entwerfen der Navigation für eine Website ist...

Automatische Dateisynchronisierung zwischen zwei Linux-Servern

Wenn Server B (172.17.166.11) eingeschaltet oder ...