Grundlegende Anwendungsbeispiele für Listener in Vue

Vorwort

Vue bietet mit der Überwachungsoption eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dieser Ansatz ist besonders nützlich, wenn Sie bei Datenänderungen asynchrone oder aufwändige Vorgänge ausführen müssen.

1. Grundlegende Verwendung des Listeners

<div id="demo">{{ vollständigerName }}</div>

var vm = neuer Vue({
el: '#demo',
Daten: { 
    Vorname: 'Foo', 
    Nachname: 'Bar', 
    vollständiger Name: 'Foo Bar' }, 
betrachten: 
    Vorname: Funktion (Wert) { 
        dieser.vollständigerName = Wert + ' ' + dieser.letzterName }, 
    Nachname: Funktion (Wert) { 
        dieser.vollständigerName = dieser.vorname + ' ' + val } } })

Der Zweck dieses Codes besteht darin, den Vornamen und den vollständigen Namen zu überwachen und bei einer Änderung den Wert des vollständigen Namens zu ändern.

2. Listener-Format

Listener im Methodenformat

• Nachteil 1: Es kann nicht automatisch beim ersten Aufrufen der Seite ausgelöst werden!
• Nachteil 2: Wenn Sie einem Objekt zuhören und sich die Eigenschaften im Attribut ändern, wird der Listener nicht ausgelöst!

Objektformat-Listener

• Vorteil 1: Es kann automatisch ausgelöst werden, sobald Sie die Seite aufrufen!
• Vorteil 2: Es ist eine gründliche Überwachung möglich, d. h. ob sich die Attribute im Überwachungsobjekt geändert haben!

3. Trigger-Monitoring und Deep Monitoring, sobald die Seite aufgerufen wird

Triggern Sie den Listener, sobald Sie die Seite aufrufen

Dies wird durch das Hinzufügen der sofortigen Option erreicht

const vm = neuer Vue({
    el: '#app',
    Daten: {
        Info:
            Benutzername: „admin“
        } 
    },
    betrachten:{
        Info:
            handle(neuerWert){
                console.log(neuerWert)
            },
            //Löse den Listener aus, sobald die Seite aufgerufen wird. immediate: true
        }
    }
})

Umfassende Überwachung

Im obigen Code können wir nicht erfolgreich überwachen, wann sich der Benutzername ändert, da sich der Wert des Objektattributs ändert. Daher benötigen wir eine gründliche Überwachung. Fügen Sie einfach die Option „deep“ hinzu.

const vm = neuer Vue({
    el: '#app',
    Daten: {
        Info:
            Benutzername: „admin“
        } 
    },
    betrachten:{
        Info:
            handle(neuerWert){
                console.log(neuerWert)
            },
            //Löse den Listener aus, sobald die Seite aufgerufen wird. immediate: true,
            // Implementieren Sie eine umfassende Überwachung. Sobald sich eine Eigenschaft des Objekts ändert, wird die „Objektüberwachung“ ausgelöst.
            tief: wahr
        }
    }
})

Deep Listening gibt den Wert der Untereigenschaft des Listening-Objekts zurück.

Das Ausführungsergebnis des obigen Codes ist das Drucken des Infoobjekts. Wir möchten den Wert des Benutzernamens drucken, aber es ist mühsam, newVal.username hinzuzufügen. Wir können den Wert des geänderten Unterattributs tatsächlich direkt überwachen und drucken. Wir müssen nur eine Ebene einfacher Anführungszeichen um das zu überwachende Unterattribut hinzufügen:

const vm = neuer Vue({
    el: '#app',
    Daten: {
        Info:
            Benutzername: „admin“
        } 
    },
    betrachten:{
        'info.Benutzername': {
            handle(neuerWert){
                console.log(neuerWert)
            }
        }
    }
})

endlich

⚽Dieser Artikel stellt die grundlegende Verwendung von Listenern in Vue und die Implementierung von Deep Listening vor. Ich hoffe, Sie werden nach der Lektüre etwas dazulernen ~

Damit ist dieser Artikel über die grundlegende Verwendung von Listenern in Vue abgeschlossen. Weitere Informationen zur Verwendung von Vue-Listenern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!