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

1. 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

2. 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!