Detailliertes Verständnis der Watch-Nutzung in vue.js

Der Inhalt dieses Artikels soll Ihnen ein tiefgreifendes Verständnis der Verwendung von watch in vue.js vermitteln. Er hat einen gewissen Referenzwert
Beobachten:

Beobachten Sie Datenänderungen auf der Vue-Instanz, die einem Objekt entspricht.

Schlüssel: Es ist das Ding, das überwacht werden muss:

1. Dies kann der Fall sein, wenn die Funktion, die beim Ändern der Taste ausgeführt wird, zwei Parameter hat: Der erste ist der Wert vor der Änderung und der zweite ist der Wert nach der Änderung.

2. Es kann sich um einen Funktionsnamen handeln, der in einfache Anführungszeichen gesetzt werden muss.

3. Es kann ein Objekt sein. Dieses Objekt hat drei Optionen:

(1) Handler: eine Rückruffunktion, eine Funktion, die ausgeführt werden soll, wenn eine Änderung erkannt wird.
(2) tief: boolescher Wert, ob tief überwacht werden soll. (Im Allgemeinen sind Änderungen in Objektattributwerten während der Überwachung nicht zu hören, Änderungen in Arrays sind jedoch zu hören)
(3) Sofort: boolescher Wert, ob die Handlerfunktion sofort ausgeführt werden soll.


Drei Wachsituationen:

1. Gewöhnliche Wache:

2. Objektüberwachung:

    el:'#app',
    data:{
        meter:1000,
        kilameter:1
    },
    watch:{
        meter:function(val){
            this.kilameter = val * 0.1;
        },
        kilameter:function(val){
            this.meter = val *1000;
        }
    }
})

    el:'#app',
    data:{
        arr:[1,2,3]
    },
    watch:{
        arr:function(oldV,newV){
            console.log(oldV);
            console.log(newV);      
        }
    }
})

Verwandte Empfehlungen:

    el:'#app',
    data:{
        obj : {
            a:111,
            b:222
        }   
    },
    watch:{
        obj:{
            handler:function(oldV,newV){
                console.log(oldV);
            },
            deep:true
        }
    }
)

Detaillierte Erläuterung der Überwachungsverwendung bei der VueJs-Erkundung

Zusammenfassung der VueJs $watch()-Methode!!

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis der Watch-Nutzung in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!