So verwenden Sie watch in Vue, um Änderungen in mehreren Daten zu überwachen

Vue ist ein beliebtes JavaScript-Framework, das einen sehr nützlichen Datenbindungsmechanismus bietet. Das Überwachungsobjekt in Vue ist eine sehr wichtige Funktion, es kann uns helfen, Änderungen in einzelnen oder mehreren Daten zu überwachen. In diesem Artikel wird erläutert, wie Sie Überwachungsobjekte in Vue verwenden, um Änderungen in mehreren Daten zu überwachen.

Zuerst müssen wir verstehen, was das Überwachungsobjekt in Vue ist. Das Watch-Objekt ist eine Option, die in Vue-Komponenten zum Überwachen von Datenänderungen verwendet wird. Wir können die Watch-Option verwenden, um den Wert eines Ausdrucks zu beobachten. Wenn sich der Wert des Ausdrucks ändert, führt Watch automatisch die entsprechende Rückruffunktion aus. In Vue können wir das Überwachungsobjekt als String, Funktion oder Objekt angeben. In diesem Artikel verwenden wir ein Objekt, um Überwachungsoptionen anzugeben.

Angenommen, wir haben eine Vue-Komponente mit zwei Dateneigenschaften: Nachricht und Anzahl. Wir möchten auf Änderungen in diesen beiden Daten achten und die entsprechenden Elemente auf der Seite aktualisieren. Zuerst müssen wir ein Überwachungsobjekt in den Optionen der Komponente hinzufügen:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  },
  template: '<div>{{ message }} {{ count }}</div>'
})

Im obigen Code haben wir ein Überwachungsobjekt in den Optionen der Vue-Komponente hinzugefügt. Dieses Überwachungsobjekt verfügt über zwei Attribute, die den Nachrichten- und Zähldatenattributen entsprechen. Jede Eigenschaft hat eine anonyme Funktion als Wert. Diese beiden Funktionen werden immer dann aufgerufen, wenn sich das entsprechende Datenattribut ändert. Beide Funktionen akzeptieren zwei Parameter: den neuen Wert und den alten Wert. Wir können innerhalb dieser Funktionen jeden gewünschten Code ausführen. Im obigen Beispiel haben wir einfach eine Nachricht an die Konsole ausgegeben.

Wir können die Tiefenüberwachungsoption auch verwenden, um mehrere Datenebenen zu überwachen. Deep Monitoring in Vue bedeutet, dass der Watch-Callback nur dann ausgelöst wird, wenn sich der Wert einer Objekt- oder Array-Eigenschaft ändert. In Vue kann standardmäßig nur eine Ebene von Datenänderungen erkannt werden. Wenn Sie Änderungen in mehrschichtigen Daten im Überwachungsobjekt überwachen müssen, müssen Sie dem Attributnamen das Tiefenzeichen ($) hinzufügen.

Vue.component('my-component', {
  data: function () {
    return {
      person: {
        name: 'Bob',
        age: 30
      }
    }
  },
  watch: {
    'person.name': {
      handler: function (newVal, oldVal) {
        console.log('person.name changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    },
    'person.age': {
      handler: function (newVal, oldVal) {
        console.log('person.age changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    }
  },
  template: '<div>{{ person.name }} {{ person.age }}</div>'
})

In diesem Beispiel überwachen wir Änderungen in den Namens- und Altersattributen des Personenobjekts. Da es sich bei dem Personenobjekt um ein verschachteltes Objekt handelt, müssen wir vor dem Attributnamen ein Tiefenzeichen hinzufügen, damit Vue Änderungen in diesen Attributen genau überwachen kann.

In diesem Artikel stellen wir vor, wie Sie Überwachungsobjekte in Vue verwenden, um Änderungen in mehreren Daten zu überwachen. Wir haben besprochen, wie man mit der Watch-Option Änderungen in einem einzelnen Datenelement beobachtet und wie man mit der Deep-Watch-Option Änderungen an einem Objekt oder einer Array-Eigenschaft beobachtet. In Vue ist Watch eine sehr praktische Funktion, mit der wir Datenänderungen einfach überwachen und entsprechende Vorgänge ausführen können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie watch in Vue, um Änderungen in mehreren Daten zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!