Ausführliche Erklärung zur Verwendung der Uhr in Vue? Einführung in die Verwendung von Uhren

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

This is what passiert, wenn watch verwendet wird. Eine Funktion besteht darin, dass die Listening-Funktion nicht ausgeführt wird, wenn der Wert zum ersten Mal gebunden wird. Sie 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 von der übergeordneten Komponente übergebenen Standardwert erhalten, muss sie auch die Funktion ausführen. „immediate“ muss auf „true“ gesetzt werden.

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 unmittelbaren Methode , ob der Handler ausgeführt werden soll, bedeutet dies, dass die Handler-Methode sofort ausgeführt wird, wenn sie in der Überwachung deklariert wird. Wenn der Wert falsch ist, wird sie wie normal ausgeführt betrachten.

tiefWenn Änderungen in einem Objekt überwacht werden müssen, kann die normale Überwachungsmethode Änderungen in den internen Eigenschaften des Objekts nicht überwachen Nur in den Daten können Änderungen erkannt werden. Zu diesem Zeitpunkt ist das tiefe Attribut erforderlich, um das Objekt gründlich zu überwachen.

<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
    }
  } 
})

Tiefe festlegen: 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 hat, werden Änderungen in jedem Eigenschaftswert ausgeführt. Handler. Wenn Sie nur einen Attributwert im Objekt überwachen müssen, können Sie die folgende Optimierung durchführen: Verwenden Sie die Form einer Zeichenfolge, um das Objektattribut zu überwachen:

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

Dadurch wird nur einem bestimmten Attribut von ein Listener hinzugefügt das Objekt.

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der Uhr in Vue? Einführung in die Verwendung von Uhren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!