Heim > Artikel > Web-Frontend > Eine ausführliche Erklärung von oldvalue und newValue von $watch in vue.js
Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum alten Wert und neuen Wert von $watch in vue.js ein. Der Artikel stellt ihn anhand von Beispielcodes detailliert vor und stellt andere Tests zum Thema watch vor Die Verwendung von vue.js hat einen gewissen Referenz- und Lernwert. Freunde, die es benötigen, können dem Editor folgen, um einen Blick darauf zu werfen.
oldvalue und newValue in $watch
Wie wir alle wissen, bietet uns vue.js die $watch-Methode zur Überwachung von Objektänderungen , und im Rückruf werden zwei Objekte zurückgegeben, nämlich oldValue und newValue.
Wie der Name schon sagt, sind diese beiden Objekte die Werte vor und nach den Objektänderungen.
Aber während der Nutzung habe ich festgestellt, dass diese beiden Werte nicht immer zu erwarten sind. Werfen wir einen Blick auf die ausführliche Einführung:
Definieren Sie den Wert von Daten
data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京' }], obj: { name: '呆呆', address: '苏州' }, str: '哈哈哈' }
Definieren Sie die Uhr
watch: { arr: function(newValue, oldValue) { console.log(newValue, oldValue) console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, obj: function(newValue, oldValue) { console.log(newValue, oldValue) console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, str: function(newValue, oldValue) { console.log(newValue, oldValue) console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, }
Ereignisauslöser definieren
methods: { test() { this.arr.push({ name: 9 }) this.$set(this.obj, 'i', 0) this.str = '' }, test1() { this.arr = [{ name: '000' }] this.obj = { name: 999 } this.str = '123' } }
Das Testergebnis ist
Drücken Sie die Array Obwohl sowohl die Operation als auch die $set-Operation für Obj das Überwachungsereignis auslösen können, sind im vom Rückruf zurückgegebenen Ergebnis oldValue und newValue identisch. Das String-Objekt gibt wie erwartet zurück
Achten Sie beim Zuweisen von Werten zu Arrays und Objs auf Trigger und oldValue und newValue kehren wie erwartet zurück
Andere Tests zur Uhr
Überwachung kann nicht ausgelöst werden
1. Array
Ändern Sie die Wert eines Attributs eines Index
Verwenden Sie natives Löschen, um ein Attribut zu löschen
Fügen Sie einem Index ein Attribut hinzu (ohne $ set zu verwenden)
Neu zuweisen
2. Objekt
Ändern Sie den Wert einer Eigenschaft (dies wird jedoch durch die Attributüberwachung ausgelöst)
Ein Attribut hinzufügen (ohne $set)
Natives Löschen löscht ein Attribut
Die obige Zusammenfassung ist möglich Es gibt Mängel
Wanjiao implementiert die Überwachungsüberwachung
Fügen Sie einen solchen Code hinzu, nachdem Sie die Daten geändert haben
Array
arr = [...arr]
obj
obj = {...obj}
Zusammenfassung
Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung von oldvalue und newValue von $watch in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!