Detaillierte Erläuterung der Verwendung von watch in vue.js

Verwenden Sie in Vue Watch, um auf Datenänderungen zu reagieren. Es gibt ungefähr drei Möglichkeiten, watch zu verwenden. Der folgende Code ist eine einfache Verwendung von watch:

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 
})

Schreiben Sie direkt eine Listening-Verarbeitungsfunktion und führen Sie die Funktion jedes Mal aus, wenn sich der cityName-Wert ändert. Sie können den Methodennamen auch in Form einer Zeichenfolge direkt nach den überwachten Daten hinzufügen:

watch: {
    cityName: 'nameChange'
    }
 }

immediate und handler

Bei dieser Verwendung von watch gibt es eine Funktion, d. h. wenn der Wert gebunden ist Beim ersten Mal wird sie nicht ausgeführt. Die Abhörfunktion wird nur ausgeführt, wenn sich der Wert ändert. Wenn wir die Funktion ausführen müssen, wenn der Wert anfänglich gebunden ist, müssen wir das Attribut „immediate“ verwenden.

Wenn beispielsweise eine übergeordnete Komponente dynamisch einen Wert an eine untergeordnete Komponente überträgt und die Requisiten der untergeordneten Komponente zuerst den Standardwert von der übergeordneten Komponente erhalten, muss sie auch die Funktion ausführen. Zu diesem Zeitpunkt muss „Sofort“ festgelegt werden zu wahr.

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  } 
})

Die überwachten Daten werden später in Objektform geschrieben, einschließlich der Handler-Methode und der Funktion, die wir zuvor geschrieben haben.

Immediate gibt an, ob der Handler ausgeführt werden soll, wenn er zum ersten Mal in der Überwachung gebunden ist. und der Wert ist wahr. Dies bedeutet, dass die Handler-Methode sofort ausgeführt wird, wenn sie in watch deklariert wird. Wenn der Wert falsch ist, wird sie ausgeführt, wenn sich die Daten ändern, genau wie bei normaler Verwendung von watch.

deep

Wenn Sie Änderungen an einem Objekt überwachen müssen, können die Änderungen in den internen Eigenschaften des Objekts nicht mit der normalen Überwachungsmethode überwacht werden. Zu diesem Zeitpunkt benötigen Sie die tiefes Attribut, um den Objektmonitor zu vertiefen.

<input type="text" v-model="cityName.name"/>

new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

Setzen Sie tief: true, um Änderungen in cityName.name zu überwachen. Zu diesem Zeitpunkt wird dieser Listener zu allen Eigenschaften von cityName hinzugefügt. Wenn das Objekt viele Eigenschaften enthält, wird der Handler für jede Änderung des Eigenschaftswerts ausgeführt . Wenn Sie nur einen Attributwert im Objekt überwachen müssen, können Sie die folgenden Optimierungen vornehmen:

Verwenden Sie die Form einer Zeichenfolge, um das Objektattribut zu überwachen:

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

Auf diese Weise wird nur ein bestimmtes Attribut des Objekts überwacht mit einem Zuhörer hinzugefügt.

Änderungen in Arrays (eindimensional, mehrdimensional) erfordern keine umfassende Überwachung, Änderungen in den Eigenschaften von Objekten in Objektarrays erfordern jedoch eine umfassende Überwachung. 🔜 Besuchen Sie:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von watch in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!