Vue3 watch-Eigenschaft

Vue3 选项式 APIVue3 Options API

In Vue3,watchDie Eigenschaft wird verwendet, um Änderungen an einem Datenelement in der Vue-Instanz zu überwachen und die entsprechende Callback-Funktion auszuführen, wenn sich die Daten ändern.

watchSie ermöglicht es uns, Änderungen an bestimmten Daten in der Vue-Instanz zu beobachten und darauf zu reagieren und dadurch einige Seiteneffekte auszuführen, wie das Aktualisieren des DOM, das Ausführen von Netzwerkanfragen usw.

2. Grundlegende Verwendung der watch-Eigenschaft

In Vue3,watchDie Eigenschaft kann auf folgende Arten verwendet werden:

Beispiel

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue}to ${newValue}`);
    });

    return {
      count
    };
  }
};

3. Code-Erklärung

Im obigen Code:

  • Zuerst verwenden wirrefum reaktive Daten zu erstellencount, und setzen ihren Anfangswert auf 0.
  • Dann verwenden wirwatchFunktion zum Überwachen voncountÄnderungen.watchakzeptiert zwei Parameter:
    • Der erste Parameter sind die Daten, die wir überwachen wollen (hier ist escount）。
    • Der zweite Parameter ist eine Callback-Funktion, die ausgelöst wird, wenn sich die beobachteten Daten ändern. Die Callback-Funktion empfängt zwei Parameter:
      • newValue: der neue Wert nach der Änderung der Daten.
      • oldValue: der alte Wert vor der Änderung der Daten.

4. Fortgeschrittene Verwendung der watch-Eigenschaft

Neben dem Beobachten einzelner Daten,watchkönnen Sie auch mehrere Daten beobachten oder einen komplexen Ausdruck beobachten.

4.1 Beobachten mehrerer Daten

Beispiel

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`firstName geändert von ${oldFirstName}zu ${newFirstName}`);
      console.log(`lastName geändert von ${oldLastName}zu ${newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

In diesem Beispiel haben wir beobachtetfirstNameundlastNameÄnderungen an zwei Daten. Wenn sich eines davon ändert, wird die Callback-Funktion ausgelöst.

4.2 Komplexe Ausdrücke überwachen

Beispiel

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Alice',
      age: 25
    });

    watch(
      () => user.value.age, // Änderungen an user.age überwachen
      (newAge, oldAge) => {
        console.log(`Alter geändert von ${oldAge}zu ${newAge}`);
      }
    );

    return {
      user
    };
  }
};

In diesem Beispiel verwenden wir eine Funktion, umuser.ageÄnderungen zu überwachen. Dieser Ansatz eignet sich zum Überwachen einer Eigenschaft innerhalb eines Objekts.

5. Optionen für die watch-Eigenschaft

watchDie Funktion akzeptiert außerdem einen dritten Parameter, ein optionales Konfigurationsobjekt, mit dem sich das Überwachungsverhalten anpassen lässt.

Beispiel

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue}to ${newValue}`);
    }, {
      immediate: true, // Die Callback-Funktion sofort ausführen
      deep: true // Tiefes Überwachen, geeignet zum Überwachen von Objekten oder Arrays
    });

    return {
      count
    };
  }
};
  • immediate: true: gibt an, dass die Callback-Funktion sofort ausgeführt wird, wenn die Überwachung beginnt, anstatt darauf zu warten, dass sich die Daten ändern.
  • deep: true: bedeutet tiefes Überwachen und eignet sich zum Überwachen von Änderungen in Objekten oder Arrays.

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen